Question

I’m using the following jQuery for hiding and showing content (toggle), as a tree navigation menu in my website. I found this code extremely useful because by clicking, it displays only one div at a time.

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript">
function show_region(chosen_region) {
     $('.city_div').each(function(index) {
          if ($(this).attr("id") == chosen_region) {
               $(this).slideDown(200);
          }
          else {
               $(this).slideUp(600);
          }  
     });
}
</script>

<style type="text/css">
   .city_div {display: none;}
</style>


<a href="javascript:show_region('box01');">North</a><br>
<div class="city_div" id="box01">Div #01</div>

<a href="javascript:show_region('box02');">Centre</a><br>
<div class="city_div" id="box02">Div #02</div>

<a href="javascript:show_region('box03');">South</a><br>
<div class="city_div" id="box03">Div #03</div>

The problem is that I can close a div only by opening another div.

How to close the div by a second click on it?

Answer 1

You can use slideToggle, change from slideDown to slideToggle:

function show_region(chosen_region) {
     $('.city_div').each(function(index) {
          if ($(this).attr("id") == chosen_region) {
               $(this).slideToggle(200); // instead of slideDown
          }
          else {
               $(this).slideUp(600);
          }  
     });
}