Toggle tabs Tims

by Mohamed Mulla

HTML

<div id="nav">
    <a href="#" id="dogs">Dogs</a>
    <a href="#" id="cats">Cats</a>
    <a href="#" id="horses">Horses</a>
    <a href="#" id="cows">Cows</a>
</div>
<div class="hiddenPanel hidden">
<div class="menu" id="menu_dogs" style="background:red;">dogs 
    Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a. Pellentesque in ipsum id orci porta dapibus. Cras ultricies ligula sed magna dictum porta. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a. Nulla porttitor accumsan tincidunt. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Proin eget tortor risus. Proin eget tortor risus.
</div>
<div class="menu" id="menu_cats" style="background:yellow;"> cats
Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a. Pellentesque in ipsum id orci porta dapibus. Cras ultricies ligula sed magna dictum porta. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a. Nulla porttitor accumsan tincidunt. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Proin eget tortor risus. Proin eget tortor risus.
</div>
<div class="menu" id="menu_horses"  style="background:orange;"> horses
    Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a. Pellentesque in ipsum id orci porta dapibus. Cras ultricies ligula sed magna dictum porta. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a. Nulla porttitor accumsan tincidunt. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Proin eget tortor risus. Proin eget tortor risus.
</div>
<div class="menu"...

CSS

.hiddenPanel{
    height:300px;

}

JavaScript

$(function() {

   $('.menu').hide();

    $('#nav a').click(function(){
          var idvar = this.id;
        var menuid = '#menu_'+idvar;
        
                    // wrap all content blocks in a wrapper div called something like 'panel'
                    // On clicking on the menu first check if panel is open
                    if($('.hiddenPanel').hasClass('hidden')) {
                        // Slide down the panel
                        
                        $('.hiddenPanel').addClass('active');
                        $(menuid).slideToggle();
                        // load the content
                    } else {
                        // check if we're clicking the active item and if so close the panel
                        if($(this).hasClass('active')) {
                            $('.hiddenPanel').slideUp();
                            $(this).removeClass('active');
                            
                        } else {
                            
                            // Else - switch the content to new menu item
                    $('.menu').not(menuid).slideUp( function(){ 
                        $(menuid).slideDown(); 
                    });            
                        
                            // remove active class from menu and add active class to our current item
                            $('#nav a').removeClass('active');
                            $(this).addClass('active');
                        }
                    }
        
        /*
        $('.menu').slideUp();
        $(menuid).slideDown();
        */
        /*
        $('.menu').not(menuid).slideUp( function(){ 
            $(menuid).slideToggle(); 
        });
        */
        return false;
    });
});