Как сделать так, чтобы CSS Toggle был таким?

Question

Я занимаюсь разработкой сайта и на странице часто задаваемых вопросов мне нужно показать этот тип часто задаваемых вопросов.

При нажатии (Q) (A) должен открыться с анимацией jquery. 1 Вопрос должен быть открытым одновременно.

Если щелкнуть по другому (Q), предыдущий должен закрыться, и нажатие будет открыто.

<div class="faqBlock">

    <div class="qa">
        <dt>How do I buy Snoopra?</dt>
        <dd>Just decide whether you want to pay monthly or yearly, click on the buy now button, fill out the payment details and you’re done!</dd>
    </div><!-- qa -->

</div><!-- faqBlock -->

Answer 1

Это называется баян, и самый простой способ его создания:

$('.qa h3').click(function(){
  $(this).next().slideToggle();
});

.qa > *{margin:0; padding:8px 16px;} /* all */
.qa > h3{cursor:pointer; border-top: 1px solid #eee;} /* questions */
.qa > div{display:none;} /* Hide all answers */

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="qa">
  <h3>Question 1</h3>
  <div>answer 1...</div>
  <h3>Question 2</h3>
  <div>answer 2...</div>
  <h3>Question 3</h3>
  <div>answer 3...</div>
</div>

Чтобы закрыть ранее открытые и переключиться нажатием одной:

$('.qa').each(function() {
  
  var $q = $(this).find("> h3"),
      $a = $(this).find("> div");

  $q.click(function() {
    var $qa = $(this).next(); // Get the question's answer
    $a.not($qa).slideUp();    // Close all answers (not the next's one)
    $qa.slideToggle();        // Toggle answer
  });

});

.qa > *{margin:0; padding:8px 16px;} /* all */
.qa > h3{cursor:pointer; border-top: 1px solid #eee;} /* questions */
.qa > div{display:none;} /* Hide all answers */

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="qa">
  <h3>Question 1</h3>
  <div>answer 1...</div>
  <h3>Question 2</h3>
  <div>answer 2...</div>
  <h3>Question 3</h3>
  <div>answer 3...</div>
</div>

Answer 2

Пожалуйста, найдите решение проблемы, которую вы разместили. Я думаю, это работает в соответствии с вашим требованием.

http://jsfiddle.net/ardeezstyle/ESLEB/1/

$(document).delegate('.q','click',function(){
    $('.a').hide();
    $(this).next('.a').show();
});

Answer 3

Для вас есть slideToggle(). Используйте его.

$('#clickme').click(function() {
  $('#book').slideToggle('slow', function() {
    // Animation complete.
  });
});

пример