jquery - show div on click , then remove all on click -

trying open each container div on click , have button remove content. when reclick show div after removing , nothing display http://jsfiddle.net/zm9dl/467/

script

$('.menu>li.toggle6').on('click',function(e){         $('.container').hide(); }); $('.menu>li').on('click',function(e){     $('.container>.'+ e.target.classlist[0]).show().siblings().hide(); }); 

html

<ul class="menu">     <li class="toggle1">one</li>     <li class="toggle2">two</li>     <li class="toggle3">three</li>     <li class="toggle4">four</li>     <li class="toggle5">five</li>     <li class="toggle6">remove all</li> </ul>  <div class="container">     <div class="toggle1">here contents of 1..</div>     <div class="toggle2">here contents of 2..</div>     <div class="toggle3">here contents of 3...</div>     <div class="toggle4">here contents of 4....</div>     <div class="toggle5">here contents of 5.....</div> </div> 

because hiding container, when clicking item show though items display set container hidden nothing displayed.

one solution hide toggle elements instead of container like

$('.menu > li.toggle6').on('click', function(e) {    $('.container > *').hide();  });  $('.menu > li').on('click', function(e) {    $('.container > .' + e.target.classlist[0]).show().siblings().hide();  });

.menu > li {    display: inline-block;    font-weight: bold;    padding: 6px 10px;    cursor: pointer;    border: 2px solid tomato;    margin: 5px;  }  .container > div {    display: none;  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>  <ul class="menu">    <li class="toggle1">one</li>    <li class="toggle2">two</li>    <li class="toggle3">three</li>    <li class="toggle4">four</li>    <li class="toggle5">five</li>    <li class="toggle6">remove all</li>  </ul>    <div class="container">    <div class="toggle1">here contents of 1..</div>    <div class="toggle2">here contents of 2..</div>    <div class="toggle3">here contents of 3...</div>    <div class="toggle4">here contents of 4....</div>    <div class="toggle5">here contents of 5.....</div>  </div>

another option call show of container in each click

$('.menu > li.toggle6').on('click', function(e) {    $('.container > *').hide();  });  $('.menu > li:not(.toggle6)').on('click', function(e) {    $('.container').show().children('.' + e.target.classlist[0]).show().siblings().hide();  });

.menu > li {    display: inline-block;    font-weight: bold;    padding: 6px 10px;    cursor: pointer;    border: 2px solid tomato;    margin: 5px;  }  .container > div {    display: none;  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>  <ul class="menu">    <li class="toggle1">one</li>    <li class="toggle2">two</li>    <li class="toggle3">three</li>    <li class="toggle4">four</li>    <li class="toggle5">five</li>    <li class="toggle6">remove all</li>  </ul>    <div class="container">    <div class="toggle1">here contents of 1..</div>    <div class="toggle2">here contents of 2..</div>    <div class="toggle3">here contents of 3...</div>    <div class="toggle4">here contents of 4....</div>    <div class="toggle5">here contents of 5.....</div>  </div>