Th original Tabs Working

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="sink">
<div class="menu" id="menu_dogs">stuff about dogs</div>
<div class="menu" id="menu_cats">stuff about cats</div>
<div class="menu" id="menu_horses">stuff about horses</div>
<div class="menu" id="menu_cows">stuff about cows</div>
</div>

JavaScript

$(function() {

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

    $('#nav a').click(function(){
        
        //set variables
        var idvar = this.id;
        var menuid = '#menu_'+idvar;
        
        //if first clicked slideDown
        //if clicked when open or the menuid is different from the first one clicked
        //SlideUp content into window
        $('.menu').not(menuid).slideUp( function(){ 
            $(menuid).addClass(' open').slideDown(); 
            //$(menuid).addClass(' open').slideUp(); 
         
        });
        $('.menu').hasClass().slideUp( function(){ 
            $(menuid).removeClass(' open').slideUp(); 
            //$(menuid).addClass(' open').slideUp(); 
         
        });
        
              return false;
              
    });
    
   
});