CODEWITHSUNDEEP
javascriptjquery
Filip
Filip

Reputation: 147

Toggle up all elements if were open

For this markup:

<div id="citate">Citate</div>
<div id="unu" hidden>Autori</div>
<div id="autori" hidden>
    <ul>
        <li>Ion Creanga</li>
        <li>Ion Creanga</li>
        <li>Ion Creanga</li>
        <li>Ion Creanga</li>
    </ul>
</div>
<div id="doi" hidden>Subiecte</div>
<div id="subiecte" hidden>
    <ul>
        <li>Creanga</li>
        <li>Creanga</li>
        <li>Creanga</li>
        <li>Creanga</li>
    </ul>
</div>

I have this code JS :

$(document).ready(function () {
    $("div#citate").click(function () {
        $("div#unu ").slideToggle();
    });
});
$(document).ready(function () {
    $("div#citate").click(function () {
        $("div#doi ").slideToggle();
    });
});
$(document).ready(function () {
    $("div#unu").click(function () {
        $("div#autori").slideToggle();
    });
});
$(document).ready(function () {
    $("div#doi").click(function () {
        $("div#subiecte").slideToggle();
    });
});

and i want when i click second time on "Citate" it will toogleup all other elements from toogledown "Autori" and "Subiecte" if there were open. I try to do it, I searched how to but can not do it right. I used slideToggle() function.

Upvotes: 0

Views: 97

Answers (3)

Wolfram
Wolfram

Reputation: 8052

This is not a optimal solution as it does not scale at all, but it works. If you toggle the parent (#citate) and your submenus are visible, then close them by using slideToggle or slideUp.

$(document).ready(function(){

  $("div#citate").click(function(){
      $("div#unu").slideToggle();
      $("div#doi").slideToggle();
      if($("div#autori").is(":visible")) {
        $("div#autori").slideToggle();
      }
      if($("div#subiecte").is(":visible")) {
        $("div#subiecte").slideToggle();
      }
  });

  $("div#unu").click(function(){
      $("div#autori").slideToggle();
  });

  $("div#doi").click(function(){
      $("div#subiecte").slideToggle();
  });
});

Upvotes: 0

Ash
Ash

Reputation: 1422

Its Working use callback : See DEMO

Upvotes: 0

Rakesh Kumar
Rakesh Kumar

Reputation: 2853

This can help you.

$("div#citate").click(function(){
   if(  $('div#autori, div#subiecte').is(':visible') ){
      $("div#unu, div#doi,div#autori, div#subiecte").slideUp();
  }
});

Fiddle Demo

No need to add $(document).ready again and agian

Upvotes: 1

Related Questions