jQuery расширяемые и разборные divs

Question

У меня есть небольшая проблема с некоторыми расширяющимися и свертывающимися div на странице часто задаваемых вопросов, которую я создаю. Когда пользователь нажимает на вопрос, ему нужно свернуть все остальные ответные div и развернуть только ответ на нажатый (вопрос) div. Теперь я выяснил это - ЗА ИСКЛЮЧЕНИЕМ, как только пользователь щелкнул все div на странице, и все они были развернуты, а затем рухнули после этого, затем требуется два щелчка мыши, чтобы снова открыть их, а не только один.

JQuery:

$(document).ready(function() { 
$('.answer').hide(); // hide the answer divs first 

$('#content .question').click().toggle(
    function() { 
     $('.answer').hide(); //hide all other divs when clicked 
     $('#content .question').removeClass('close'); // as well as remove the 'expanded' icon 
     $(this).next('.answer').slideDown(); //slidedown the appropriate div 
     $(this).addClass('close'); //as well as insert the 'expanded' icon 
     }, 
     function() { 
      $(this).next('.answer').slideUp(); // hide the selected div 
      $(this).removeClass('close'); // as well as remove the 'expanded' icon 
      } 
     ); 
    }); 

CSS:

#content {width: 1310px; height: 350px;} 
#col_1 {width: 380px; height: 350px; margin: 20px; padding: 5px;} 
.question {color: #64AA01; background-image: url(images/open_div.jpg); cursor: pointer; background-repeat: no-repeat; padding-left: 15px;} 
.close {background-image: url(images/close_div.jpg);} 
.answer {margin-left: 16px;} 

HTML:

<div id="content"> 

<div id="col_1"> 

<div class="question"> 
<div align="justify">Q: This is question 1.</div> 
</div> 

<div class="answer" style = "width: 360px;"> 
<div align="justify">A: This answer is the answer to question 1.</div> 
</div><br><br> 

<div class="question">Q: This is question 2.</div> 
<div class="answer" style = "width: 360px;"> 
<div align="justify">A: This answer is the answer to question 2.</div> 
</div><br><br> 

<div class="question"> 
<div align="justify">Q: This is question 3.</div> 
</div> 

<div class="answer" style = "width: 360px;"> 
<div align="justify">A: This answer is the answer to question 3.</div> 
</div> 

</div> 

</div> 

Любые идеи?

Answer 1

Вот Plunker пример.

Вам не нужно использовать переключатель в этом случае:

$('#content .question').click(function() { 
    $('#content .question').removeClass('close'); // as well as remove the 'expanded' icon 
    $('#content .answer').slideUp(); 
    $(this).next('.answer').slideDown(); //slidedown the appropriate div 
    $(this).addClass('close'); //as well as insert the 'expanded' icon 
    }); 
    }); 

Кроме того, я добавил это в CSS, чтобы ваш ответ по умолчанию не показывать:

.answer { 
    display: none; 
} 

Answer 2

Это может быть то, что вы ищете:

jsFiddle Demo

$('.answer').hide(); // hide the answer divs first 

$('.question').click(function() { 
    $('.answer').slideUp(); 
    $(this).next('.answer').slideDown(); 
}); 

---

Вот модификация, которая позволяет щелкнуть в любом месте за пределами вопросов, и все ответы будут повторно -закрыто. Обратите внимание на использование e.stopPropagation() во избежание ответов от всегда.

jsFiddle Demo 2

$('.answer').hide(); // hide the answer divs first 

$('.question').click(function(e) { 
    $('.answer').slideUp(); 
    $(this).next('.answer').slideDown(); 
    e.stopPropagation(); 
}); 

$(document).click(function(){ 
    $('.answer').slideUp(); 
});