Expand/Retract all using .toggle jQuery

Question

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

Вот что я использую для отдельных дивы:

$('.toggle-engine').click(function() { 
    $('.specs-engine').toggle(400); 
$(this).text($(this).text() == '+' ? '-' : '+'); 
return false; 
}); 

Пробовал это для расширения/втягивания все, но если один из них уже был расширен, когда я нажал развернуть все это убирается:

$('.expand-all').click(function() { 
      $('.specs-body').toggle(400) 
    $('.specs-engine').toggle(400) 
    $('.specs-curb').toggle(400) 
    $('.specs-cap').toggle(400) 
    $('.specs-fuel').toggle(400) 
    $('.specs-brakes').toggle(400); 
$(this).text($(this).text() == '+ Expand All' ? '- Retract All' : '+ Expand All'); 
return false; 
}); 

Вот наценка:

<a class="expand-all" href="#">+ Expand All</a> 
    <a class="toggle-engine" href="#">+</a> 
    <div class="expand specs-engine"></div> 
    <a class="toggle-body" href="#">+</a> 
    <div class="expand specs-engine"></div> 

Answer 1

Вы можете использовать show или hide вместо toggle, чтобы заставить его развернуть (показать) или втянуть (скрыть) элементы.

Кроме того, я рекомендую установить общий класс для всех .specs-... элементов, как specs, так, например:

<div class="specs specs-engine"></div> 
<div class="specs specs-curb"></div> 
... etc 

Так JS будет:

$('.specs').click(function() {$(this).toggle(400);}); 
$('.expand-all').click(function() { 
    if ($(this).text() == '+ Expand All') 
    $('.specs').show(400); 
    else 
    $('.specs').hide(400); 
    $(this).text($(this).text() == '+ Expand All' ? '- Retract All' : '+ Expand All'); 
}); 

EDIT: в сделайте индивидууму +/- изображения переключите, сделайте что-нибудь вроде:

$('.specs').click(function() {$(this).toggle(400);}); 
$('.expand-all').click(function() { 
    if ($(this).text() == '+ Expand All') 
    $('.specs').show(400).find('img.plus, img.minus').hide().filter('img.plus').show(); 
    else 
    $('.specs').hide(400).find('img.plus, img.minus').hide().filter('img.minus').show(); 
    $(this).text($(this).text() == '+ Expand All' ? '- Retract All' : '+ Expand All'); 
}); 

EDIT2: если я правильно понимаю:

$('.specs').click(function() {$(this).toggle(400);}); 
$('.expand-all').click(function() { 
    if ($(this).text() == '+ Expand All') 
    $('.specs').show(400).find('.thelink').text('-'); 
    else 
    $('.specs').hide(400).find('.thelink').text('+'); 
    $(this).text($(this).text() == '+ Expand All' ? '- Retract All' : '+ Expand All'); 
}); 

Во всяком случае, вы получите его, это вопрос выбора нужного элемента и изменение его текста. jQuery делает это для всех элементов, которые он находит с помощью одного вызова функции.

Answer 2

Вы просто должны проверить, если будут расширены с помощью функции является («: видимый»)

if($('.your-div').is(':visible')){ 
    $('.your-div').toggle(); 
}