.slideToggle() ТОЛЬКО элементы, которые рухнули

Question

Итак, я провел много исследований, пытаясь найти это, но не может найти что-то, что работает.

У меня есть несколько div на странице с использованием .slidetoggle(); для отображения большего содержимого в дочернем div. То, что я хотел бы сделать, это добавить кнопку «развернуть все», которая расширит только тех, кто закрыт, оставив остальных в покое. В настоящее время развернуть все работает, но только если все элементы свернуты. В противном случае он в основном просто переключается, поэтому, если пользователь открывает один элемент, затем решает позже, он просто хочет просмотреть все, он откроет те, которые закрыты, но закройте тот, который уже открыт. Я знаю, что должен быть простой способ обойти это, но я относительно новичок в jQuery и javascript.

Вот мой текущий код - мои извинения, если он небрежный, я новичок!

$(document).ready(function(){ 
$(".question1").click(function(){ 
$("#answer1").slideToggle(); 
}); 
}); 

$(document).ready(function(){ 
$(".question2").click(function(){ 
$("#answer2").slideToggle(); 
}); 
}); 

$(document).ready(function(){ 
$(".question3").click(function(){ 
$("#answer3").slideToggle(); 
}); 
}); 

$(document).ready(function(){ 
$(".expandall").click(function(){ 
$(".answer").slideToggle(); 
}); 
}); 

И мой html-

<button class="expandall">Expand All</button> 
<div class="question"> 
<button class="question1"><b>This is a Question</b></button> 
</div> 

<div id="answer1" class="answer" style="display:none;"> 
This is an answer 
</div></div> 

<div class="question"> 
<button class="question2"><b>This is a Question</b></button> 
</div> 

<div id="answer2" class="answer" style="display:none;"> 
This is an answer 
</div></div> 

<div class="question"> 
<button href="#" class="question3"><b>This is a Question</b></button> 
</div> 

<div id="answer3" class="answer" style="display:none;"> 
This is an answer 
</div></div> 

Помощь!

Answer 1

Если изменить этот

$(document).ready(function(){ 
    $(".expandall").click(function(){ 
    $(".answer").slideToggle(); 
    }); 
}); 

в этом

$(document).ready(function() { 
    $(".expandall").click(function() { 
    $(".answer:hidden").slideToggle(); 
    }); 
}); 

только ответы, которые в настоящее время скрытые (развалилась) переключит.

Fiddle, и для справки: http://api.jquery.com/hidden-selector/

Как заметка на полях - это не обязательно, что вы обернуть каждый click() событие в одном $(document).ready() - один достаточно. Когда загружается jQuery, все события click() будут прикреплены.

Кроме того, это также возможно иметь один оператор для всех question кнопок вместо 3 отдельных click() событий:

$(".question button").click(function() { 
    $(this).parent(".question").next(".answer").slideToggle(); 
}); 

Fiddle и в качестве сниппето (с случайным вторым закрывающими </div> тегом из answers удален) :

$(document).ready(function() { 
 
    $(".question button").click(function() { 
 
    $(this).parent(".question").next(".answer").slideToggle(); 
 
    }); 
 
    $(".expandall").click(function() { 
 
    $(".answer:hidden").slideToggle(); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<button class="expandall">Expand All</button> 
 
<div class="question"> 
 
    <button class="question1"><b>This is a Question</b> 
 
    </button> 
 
</div> 
 
<div id="answer1" class="answer" style="display:none;">This is an answer</div> 
 
<div class="question"> 
 
    <button class="question2"><b>This is a Question</b> 
 
    </button> 
 
</div> 
 
<div id="answer2" class="answer" style="display:none;">This is an answer</div> 
 
<div class="question"> 
 
    <button href="#" class="question3"><b>This is a Question</b> 
 
    </button> 
 
</div> 
 
<div id="answer3" class="answer" style="display:none;">This is an answer</div>