Take the 2-minute tour ×
Webmasters Stack Exchange is a question and answer site for pro webmasters. It's 100% free, no registration required.

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?

share|improve this question

closed as not constructive by John Conde Oct 31 '12 at 1:35

As it currently stands, this question is not a good fit for our Q&A format. We expect answers to be supported by facts, references, or expertise, but this question will likely solicit debate, arguments, polling, or extended discussion. If you feel that this question can be improved and possibly reopened, visit the help center for guidance.If this question can be reworded to fit the rules in the help center, please edit the question.

add comment

1 Answer 1

up vote 1 down vote accepted

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>
share|improve this answer
add comment

Not the answer you're looking for? Browse other questions tagged or ask your own question.