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
Post a Comment