CODEWITHSUNDEEP
javascriptjqueryhtml
Snorlax
Snorlax

Reputation: 4745

jQuery Toggle Expand only if hidden

I have a list with an "Expand All" link that should expand the list ONLY if it is hidden. What I have now is that it checks whether or not the first list is expanded only. For example, if list 1's list is expanded, and you press expand all, it will toggle the list, hidding it while list 2 properly shows. I haven't been able to figure out how to toggle only if hidden. Vice versa, for the Hide all button, it should hide all expanded lists.

http://jsfiddle.net/jzhang172/dp5c3uLp/2/

$(function(){
  $("li.one").click(function(){
    $(this).next("div.expand").toggle('slow');
  });

  $("p.expand").click(function(){
    if($("div.expand").css("display")=="none"){
      $("div.expand").show('slow');
    }
  });
});
li.one a{
  text-decoration:none;
}

ul{
  margin-bottom:30px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p class="expand"><a href="" onclick='return false;'>[Expand All]</a></p>
<p class="hide"><a href="" onclick='return false;'>[Hide All]</a></p>

<li class="one"><a href="" onclick='return false;'>1(Expand Me)</a></li>
<div class="expand" style="display:none;">
  <li>1</li>
  <li>2</li>
</div>

<li class="one"><a href="" onclick='return false;'>2(Expand Me)</a></li>
<div class="expand" style="display:none;">
  <li>1</li>
  <li>2</li>
</div>

Upvotes: 0

Views: 521

Answers (4)

Sathish
Sathish

Reputation: 2460

No need to find the hidden div you just show all div.expand because as my thought expand all mean you want to show all div.expand

here is snippet just try this:

$(function(){
$("li.one").click(function(){
 $(this).next("div.expand").toggle('slow');
});
$("p.expand").click(function(){
  $("div.expand").show('slow');  
});
$("p.hide").click(function(){
 $("div.expand").hide('slow');  
});
});
li.one a{
  text-decoration:none;
}

ul{
  margin-bottom:30px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p class="expand"><a href="" onclick='return false;'>[Expand All]</a></p>
<p class="hide"><a href="" onclick='return false;'>[Hide All]</a></p>

<li class="one"><a href="" onclick='return false;'>1(Expand Me)</a></li>
<div class="expand" style="display:none;">
  <li>1</li>
  <li>2</li>
</div>

<li class="one"><a href="" onclick='return false;'>2(Expand Me)</a></li>
<div class="expand" style="display:none;">
  <li>1</li>
  <li>2</li>
</div>

Upvotes: 2

Mdalz
Mdalz

Reputation: 154

Try using the hidden filter instead

$(function(){
  $("li.one").click(function(){
    $(this).next("div.expand").toggle('slow');
  });

  $("p.expand").click(function(){
    if($("div.expand").is(":hidden")){
      $("div.expand").show('slow');
    }
  });
});
li.one a{
  text-decoration:none;
}

ul{
  margin-bottom:30px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p class="expand"><a href="" onclick='return false;'>[Expand All]</a></p>
<p class="hide"><a href="" onclick='return false;'>[Hide All]</a></p>

<li class="one"><a href="" onclick='return false;'>1(Expand Me)</a></li>
<div class="expand" style="display:none;">
  <li>1</li>
  <li>2</li>
</div>

<li class="one"><a href="" onclick='return false;'>2(Expand Me)</a></li>
<div class="expand" style="display:none;">
  <li>1</li>
  <li>2</li>
</div>

Upvotes: 1

Dave
Dave

Reputation: 10924

You can use not() and the :visible pseudo-selector.

$(function(){
  $("li.one").click(function(){
    $(this).next("div.expand").not(":visible").toggle('slow');
  });

  $("p.expand").click(function(){
    if($("div.expand").css("display")=="none"){
      $("div.expand").show('slow');
    }
  });
});
li.one a{
  text-decoration:none;
}

ul{
  margin-bottom:30px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p class="expand"><a href="" onclick='return false;'>[Expand All]</a></p>
<p class="hide"><a href="" onclick='return false;'>[Hide All]</a></p>

<li class="one"><a href="" onclick='return false;'>1(Expand Me)</a></li>
<div class="expand" style="display:none;">
  <li>1</li>
  <li>2</li>
</div>

<li class="one"><a href="" onclick='return false;'>2(Expand Me)</a></li>
<div class="expand" style="display:none;">
  <li>1</li>
  <li>2</li>
</div>

Upvotes: 1

mwl
mwl

Reputation: 1488

if ($("div.expand").is(':hidden')) { ... }

or select only hidden divs with this selector:

$("div.expand:hidden")

Upvotes: 1

Related Questions