jQuery: Show a DIV - Hide other DIVs

Some time ago I have written a tutorial in which I described how to toggle (show and hide) an area or a DIV container with JavaScript by clicking a link. In the comments, the question arose how it is possible not only to open a new DIV but also to automatically close the previously opened other DIVs at the same time. I would like to answer this question today in form of this tutorial.

HTML

Our HTML contains three containers, which are to be unfolded/shown by clicking on the respectively DIV box above. First, when loading the page, only the first container should be visible, the other two are invisible. That's why we've added the inline CSS style = "display: none" to the second and third containers.

<div class="copen" data-c="c1">Open first container</div>
<div id="c1" class="c">
   Content of the first container
</div>

<div class="copen" data-c="c2">Open second container</div>
<div id="c2" class="c" style="display:none">
   Content of the second container
</div>

<div class="copen" data-c="c3">Open third container</div>
<div id="c3" class="c" style="display:none">
   Content of the third container
</div>

All boxes that will later work as toggle-links have been given the class "copen". The containers, which should later can be opened and closed with clicking those links, all have the class "c". In addition, the containers to be opened all received a unique ID (c1, c2 and c3), which are linked to the associated link via the attribute "data-c".

JavaScript / jQuery

By JavaScript, we now only need to assign the open and close function to all links. All our links have the class "copen", so we can write $(".copen").function() to do so.

<script type="text/javascript">
   $(document).ready(function() {  
                     
      $(".copen").click(function() {
 
         $(".c").hide();

         var cid = $(this).data("c");
         $("#"+cid).show();   
 
      });
 
   });
</script>

First, we close all previously opened containers. Since all these containers have been assigned the class "c", it is sufficient to write $(".c").hide() for closing them all.

Of course, since we do not want to write a separate function for every link, we have stored the ID of the respective associated container in the data-c attribute. These are read out in the function with $(this).data("c") next, and then stored in the variable "cid". Then we just have to call .show() for the respective ID and we have done it: Our desired DIV box is open, all other DIV boxes are closed.

Extension of the Script

Of course, this simple example can be extended arbitrarily. Additional containers can be easily added by adding more IDs according to the same pattern. If you want to operate several groups simultaneously on the same page, which can be opened and closed independently of each other, you have to select a separate class apart from "c" for each group and make sure that no ID is assigned twice.