toggle menu

by karin

HTML

<ul>
    <li data-tag="1">first</li>
    <li data-tag="2">second</li>
    <li data-tag="3">third</li>
</ul>
<div id="container">
    <div class="first"><a href="#">content for first</a></div>
    <div class="second"><a href="#">content for second</a></div>
    <div class="third"><a href="#">content for third</a>
    <ul><li><a href="#">summary</a></li><li><a href="#">pnl</a></li></ul>
    </div>
    <p id="close"><a href="#">Close X</a></p>
</div>

CSS

ul {
    list-style-type:none;
}
ul li {
    background:orange;
    display:inline-block;
    padding:5px 8px;
}
#container {
    background:#059;
    width:400px;
    padding:16px;
    height:200px;
}
#container div a{
    color:#fff;
}
#close{  
    text-align:right;
}
#close a{
    color:red;
    
}

JavaScript

$('#container').hide();
$('#container').children().hide();
$('#close').show();
$('#close').on('click',function(){
$('#container').stop().slideUp();
});
$("ul li").click(function () {
    var getelem = $(this).attr('data-tag');
    $("#container").stop().slideDown("slow", function () {
        // Animation complete.
        switch (getelem) {
            case '1':
                $('#container div').fadeOut();
                $('.first').fadeIn('slow');
                break;
            case '2':
                 $('#container div').fadeOut();
                $('.second').fadeIn('slow');
                break;
            case '3':
                $('#container div').fadeOut();
                $('.third').fadeIn('slow');
                break;
            default:
                break;
                
        }
    });
});
$('.third a').on('mouseover',function(){
  // $('<ul><li><a href="#">summary</a></li><li><a href="#">pnl</a></li></ul>').appendTo('.third'); 
});