CODEWITHSUNDEEP
jqueryhtmlcss
Sowmya
Sowmya

Reputation: 26969

expand/collapse all in jquery

I have a bunch of content tabs which has expand collapse icon in each panel. Since it is so manual to close all expanded divs one by one, there is a expand all and collapse all button given to expand and collapse in one shot.

This is working as expected. But what extra I need to add in this is,

On page load I need 'collapse all' button to have inactive class coz there is no divs expanded when page loads for the first time.

And when any div is expanded, the inactive class should be remove from the 'collapse all' button and vice versa.

here is my code

//expand/collapse all
$('.expandall-icon').click(function(){
        $(this).addClass('expand-inactive');
        $('.collapseall-icon').removeClass('collapse-inactive')
        $('.inner-content').slideDown();
    });
    $('.collapseall-icon').click(function(){
        $(this).addClass('collapse-inactive');
        $('.expandall-icon').removeClass('expand-inactive');
        $('.inner-content').slideUp();
    });     

    //Collapse and expand data
    $('.inner-content').hide();
    $(".expand a").click(function (e) {
        e.preventDefault();
        $(this).parent().toggleClass('collapse');
        $(this).closest('.content').find('.inner-content').slideToggle();   
    });

And DEMO

Tried with if else condition by adding inactive class by default but this doesnt remove the inactive class even though I am checking the condition of the expanded div.

    //expand/collapse all
$('.expandall-icon').click(function(){
        $(this).addClass('expand-inactive');
        $('.collapseall-icon').removeClass('collapse-inactive')
        $('.inner-content').slideDown();
    });
$('.collapseall-icon').addClass('collapse-inactive');
    $('.collapseall-icon').click(function(){
        $(this).addClass('collapse-inactive');
        $('.expandall-icon').removeClass('expand-inactive');
        $('.inner-content').slideUp();
    });     

    //Collapse and expand data
    $('.inner-content').hide();
    $(".expand a").click(function (e) {
        e.preventDefault();
        $(this).parent().toggleClass('collapse');
        $(this).closest('.content').find('.inner-content').slideToggle().toggleClass('datapanel_opend');    

      //expand all
         if(!$(this).closest('.content').find('.inner-content').hasClass("datapanel_opend"))
        {
           $('div.collapseall-icon').removeClass('collapse-inactive');
        }
        else
        {
            $('div.collapseall-icon').addClass('collapse-inactive');
        }

    });

DEMO 2

Upvotes: 1

Views: 6944

Answers (5)

tewathia
tewathia

Reputation: 7298

I've made quite a few modifications in your code, so there might be a better way of doing this. Here's the code:

$('.collapseall-icon').addClass('collapse-inactive');

$('.expandall-icon').click(function () {
    $(this).addClass('expand-inactive');
    $('.collapseall-icon').removeClass('collapse-inactive')
    $('.inner-content').slideDown();
    $('.expand').removeClass('collapse');
});

$('.collapseall-icon').click(function () {
    $(this).addClass('collapse-inactive');
    $('.expandall-icon').removeClass('expand-inactive');
    $('.inner-content').slideUp();
    $('.expand').addClass('collapse');
});

$('.inner-content').hide();

$(".expand a").click(function (e) {
    e.preventDefault();
    $(this).parent().toggleClass('collapse');
    $(this).closest('.content').find('.inner-content').slideToggle();
    if ($('.collapse').length === $('.content').length) {
        $('.collapseall-icon').addClass('collapse-inactive');
        $('.expandall-icon').removeClass('expand-inactive');
    } else if ($('.collapse').length === 0) {
        $('.expandall-icon').addClass('expand-inactive');
        $('.collapseall-icon').removeClass('collapse-inactive');
    } else {
        $('.expandall-icon').removeClass('expand-inactive');
        $('.collapseall-icon').removeClass('collapse-inactive');
    }
});

DEMO

Upvotes: 1

Arun P Johny
Arun P Johny

Reputation: 388316

Try

//expand/collapse all
$('.expandall-icon').click(function () {
    $(this).addClass('expand-inactive');
    $('.collapseall-icon').removeClass('collapse-inactive')
    $('.inner-content').slideDown();
});
$('.collapseall-icon').click(function () {
    $(this).addClass('collapse-inactive');
    $('.expandall-icon').removeClass('expand-inactive');
    $('.inner-content').slideUp();
}).addClass('collapse-inactive');

//Collapse and expand data
var $inners = $('.inner-content').hide();
$(".expand a").click(function (e) {
    e.preventDefault();
    var $parent = $(this).parent().toggleClass('collapse');
    if ($parent.hasClass('collapse')) {
        if ($('.expand').not('.collapse').length == 0) {
            $('.collapseall-icon').addClass('collapse-inactive')
        }
        $('.expandall-icon').removeClass('expand-inactive');
    } else {
        if ($('.expand.collapse').length == 0) {
            $('.expandall-icon').addClass('expand-inactive');
        }
        $('.collapseall-icon').removeClass('collapse-inactive')
    }
    $(this).closest('.content').find('.inner-content').slideToggle();
});

Demo: Fiddle

Upvotes: 1

Naruto Dev
Naruto Dev

Reputation: 1003

Adding that collapse-inactive class on page load using this self executing function should work.

function(){
  $('.collapseall-icon').addClass('collapse-inactive');
}();

Upvotes: -1

Green Wizard
Green Wizard

Reputation: 3657

Add the follwing code to your code.

var k = 0;
if(k == 0){
$('.collaspeall-icon').addClass('collapse-inactive');
$('.expandall-icon').removeClass('collapse-inactive');
k = 1;
}

if(k == 1){
$('.expandall-icon').addClass('collapse-inactive');
$('.collapseall-icon').removeClass('collapse-inactive');
k = 0;
}

alternative solution

$('.collapseall-icon').addClass('collapse-inactive');//added when page loads.


$('.expand').click(function(){

$('.collapseall-icon').removeClass('collapse-inactive');


});

Upvotes: 2

saman khademi
saman khademi

Reputation: 842

EDITEDDDD
this is easy

$('.content .inner-content').slideToggle();

and you can use toggleClass if class .collapse height:0px

Upvotes: -1

Related Questions