CODEWITHSUNDEEP
javascriptjquery
Pawan
Pawan

Reputation: 2014

Toggle ExpandAll/CollapseAll

I am currently using jQuery toggle to toggle between show and hide. It works perfectly fine for individual elements. When I try to do a expand all and collapse all it works fine for all the condition except one. If any individual element is already expanded or collapsed it does toggle them but not as expected. That is, when I click on expand all it expands all the elements except the individual element which is already expanded get collapsed and vice-versa. How do I take care of this 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 you have any code sample it would be really helpful.

Upvotes: 0

Views: 2650

Answers (2)

Chandresh M
Chandresh M

Reputation: 3828

Check out this code if useful,

jQuery(document).ready(function($) {
    $("#toggle_container").hide();
});
function showSlidingDiv(){
    $("#toggle_container").animate({"height": "toggle"}, { duration: 500 });
}

Also can refer to Show-Hide div content using jQuery if required..

Upvotes: 1

Paul
Paul

Reputation: 141829

You can't use toggle for your close-all button in that case unless you add an extra class to something to figure out which the odd one out is and ignore it. Easiest way to make this work is to use slideDown() and slideUp() instead of slideToggle(). Remove the 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");
});

Upvotes: 1

Related Questions