CODEWITHSUNDEEP
jquerytogglehideshow
Kiki
Kiki

Reputation: 337

Close all other DIVs while one is open - with separate close button

I have a bunch of DIVs that can be toggled open and close. They are opened by clicking on the DIV "case-toggle" and are closed by a separate span called "case-close"

The DIVs that show after clicking have the class "case-popup"

The issue is that multiple DIVs can open at once, but I want only one DIV to be open at once and all others close.
I'm not sure what extra code needs to be added here to achieve that.

I have searched and searched but nothing I've found has worked while having a separate close button.

Here is the code:

$(document).ready(
    function(){
        $('.case-toggle').click(
            function(){
             $(this).next('.case-popup').show();  
        }
        );

    $('.case-close').click(
        function(){
         $(this).closest('.case-popup').hide();  
        }
        );

}       
);

Your help would be really appreciated!

Upvotes: 0

Views: 865

Answers (1)

Nandita Sharma
Nandita Sharma

Reputation: 13417

Add this line 

    $('.case-popup').hide();

to the $('.case-toggle').click() function

$(document).ready(
  function() {
    $('.case-toggle').click(
      function() {
        $('.case-popup').hide();
        $(this).next('.case-popup').show();
      }
    );

    $('.case-close').click(
      function() {
        $(this).closest('.case-popup').hide();
      }
    );    
  }
);

Use it like this

   $('.case-toggle').on("click", function() {
        $('.case-popup').hide();
        $(this).next('.case-popup').show();
  });

Upvotes: 1

Related Questions