javascript - Toggle ExpandAll/CollapseAll -


i using jquery toggle toggle between show , hide. works fine individual elements. when try expand , collapse works fine condition except one. if individual element expanded or collapsed toggle them not expected. is, when click on expand expands elements except individual element expanded collapsed , vice-versa. how take care of condition?

<script type="text/javascript">     $(".toggle_container").hide();     $("div.description-content-title").toggle(function () {         $(this).addclass("collarrow");     }, function () {         $(this).removeclass("collarrow");     });     $("div.description-content-title").click(function () {         $(this).next(".toggle_container").slidetoggle("slow");     });      $(".close-all").toggle(function () {         $(".close-all a").text("[expand all]");     }, function () {         $(".close-all a").text("[close all]");     });      $(".close-all").click(function () {         $(".toggle_container").slidetoggle("slow");     }); </script> 

html:

<div class="news-top-head">     <div class="time-head sortable" data-sort-column="contentdate">         <span style="float: left; width: auto;">time</span> <span class="sort-order-hidden ui-icon" />     </div>     <div class="description-head sortable" data-sort-column="contenttitle">         <span style="float: left; width: auto;">description</span> <span class="sort-order-hidden ui-icon" />     </div>     <div class="close-all">         <a href="#">close all</a>     </div>     <div class="clear">     </div> </div>  <div class="description-content">     <div class="description-content-title exparrow"><%=breakingnews[index].contenttitle%></div>         <div class="toggle_container">             <p ><%=breakingnews[index].contentdescription%></p>         </div>     </div> </div> 

if have code sample helpful.

you can't use toggle close-all button in case unless add class figure out odd 1 out , ignore it. easiest way make work use slidedown() , slideup() instead of slidetoggle(). remove following code:

$(".close-all").click(function () {     $(".toggle_container").slidetoggle("slow"); }); 

and change:

$(".close-all").toggle(function () {     $(".close-all a").text("[expand all]"); }, function () {     $(".close-all a").text("[close all]");  }); 

to:

$(".close-all").toggle(function () {     $(".close-all a").text("[expand all]");     $(".toggle_container").slidedown("slow"); }, function () {     $(".close-all a").text("[close all]");     $(".toggle_container").slideup("slow"); }); 

Comments

Popular posts from this blog

c# - How to set Z index when using WPF DrawingContext? -

razor - Is this a bug in WebMatrix PageData? -

visual c++ - Using relative values in array sorting ( asm ) -