toggle

by karin

HTML

<ul>
    <li data-tag="first">first</li>
    <li data-tag="second">second</li>
    <li data-tag="third">third</li>
</ul>
<div id="container">
    <div id="first">first</div>
    <div id="second">second</div>
    <div id="third">third</div>
    <p id="close">close</p>
</div>

CSS

#container{
width:500px;
    background:pink;
    padding:10px;
}
#first,#second,#third{
    height:100px;
    background:#ddd;
    margin:10px;
}
ul li{
    display:inline;
    background:pink;
}

JavaScript

$('div>div').hide();
$('ul li').on('click',function(){
var sel=$(this).attr('data-tag');
    sel='#'+sel;
$(sel).toggle();

   
});