expand/collapse all in jquery

Question

У меня есть куча вкладок контента, на которых отображается значок свернуть на каждой панели. Так как это так вручную, чтобы закрыть все расширенные divs один за другим, есть развернуть все и свернуть все кнопки, чтобы развернуть и свернуть одним выстрелом.

Работает должным образом. Но что мне нужно добавить, это

Нагрузка на страницу Мне нужна кнопка 'collapse all', чтобы иметь неактивный класс coz, нет divs, расширенных при загрузке страницы в первый раз.

И когда любой div расширяется, неактивный класс следует удалить из кнопки 'collapse all' и наоборот.

вот мой код

//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(); 
    }); 

И DEMO

---

Пробовал с ifelse состоянии путем добавления inactive класс по умолчанию, но это оленья кожа удалить inactive класс хотя я проверка условие расширенного 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

Answer 1

Я сделал довольно много изменений в коде, так что может быть лучшим способом сделать это. Вот код:

$('.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

Answer 2

EDITEDDDD
это легко

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

и вы можете использовать toggleClass если класс .collapse height:0px

Answer 3

Добавьте follwing код в код.

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; 
} 

альтернативное решение

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


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

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


}); 

Answer 4

collapse-inactive Добавим, что класс на странице загрузки, используя эту функцию самостоятельно должны работать выполняющийся.

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

Answer 5

Попробуйте

//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(); 
}); 

Демо: Fiddle