Mobile app version of vmapp.org
Login or Join
Deb1703797

: JQuery Vertical Tabbed Content I need some kind of vertical tabs for switching content. You can find such tabs at microsoft.com (under main large banner). The main problem that I saw such tutorial

@Deb1703797

Posted in: #Content #Css #Jquery

I need some kind of vertical tabs for switching content. You can find such tabs at microsoft.com (under main large banner). The main problem that I saw such tutorial recently but I forgot to bookmark it.

Does anybody knows about any tutorial, template, article, or example code they can share here?

10.01% popularity Vote Up Vote Down

Login to follow query

More posts by @Deb1703797

Login to post a comment!

1 Comments

Sorted by latest first Latest Oldest Best

 

@XinRu657

jQuery makes it really, really easy - here's a working example:

<!DOCTYPE html>
<html>
<head>
<title>jQuery Vertical Tabs</title>
<style type="text/css">
ul#verticalNav {
float:left;
clear:left;
width:15%;
}
div#sections {
float:right;
clear:right;
width:80%;
}
</style>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript">
function showSection( sectionID ) {
$('div.section').css( 'display', 'none' );
$('div'+sectionID).css( 'display', 'block' );
}
$(document).ready(function(){
if (
$('ul#verticalNav li a').length &&
$('div.section').length
) {
$('div.section').css( 'display', 'none' );
$('ul#verticalNav li a').each(function() {
$(this).click(function() {
showSection( $(this).attr('href') );
});
});
$('ul#verticalNav li:first-child a').click();
}
});
</script>
</head>
<body>
<h1>Vertical Navigation Example</h1>
<p>This page demonstrates a simple tabbed jQuery navigation scheme.</p>
<ul id="verticalNav">
<li><a href="#section1">Section I</a></li>
<li><a href="#section2">Section II</a></li>
<li><a href="#section3">Section III</a></li>
</ul>
<div id="sections">
<div class="section" id="section1">
<h2>Section I</h2>
<p>Some content specific to this section...</p>
</div>
<div class="section" id="section2">
<h2>Section II</h2>
<img src="http://upload.wikimedia.org/wikipedia/commons/6/66/Badger.jpg" alt="BADGER" />
</div>
<div class="section" id="section3">
<h2>Section III</h2>
<img src="http://upload.wikimedia.org/wikipedia/commons/thumb/7/76/Coast_Garter_Snake.jpg/800px-Coast_Garter_Snake.jpg" alt="SNAKE" />
</div>
</div>
</body>
</html>

10% popularity Vote Up Vote Down

Back to top | Use Dark Theme