Как сделать при открытии одного блока аккордеона, предыдущий открытый закрывался?

Question

Добрый день подскажите пожалуйста не вижу ошибки и как правильно сделать условие, чтобы срабатывало при открытии одного блока аккордеона, предыдущий открытый закрывался. Заранее спасибо.

$('.qe-faq-toggle').click(function () {
    if ($(this).find('.qe-toggle-content').is(':visible')) {
      $(this).find('i.fa').toggleClass('fa-chevron__turn');
      $(this).find('.qe-toggle-content').slideToggle('slow');
    } else {
      $(this).find('i.fa').toggleClass('fa-chevron__turn');
      $(this).find('.qe-toggle-content').slideDown('slow');
    }
  });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="qae-faqs-container qae-faqs-toggle-container">
            <div id="qaef-685" class="qe-faq-toggle argentina">
            <div class="qe-toggle-title">
                <h4>ADasdad?</h4>
            </div>
            <div class="qe-toggle-content" style="display: none;">
                <p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English.</p>
            </div>
        </div>
                <div id="qaef-684" class="qe-faq-toggle argentina">
            <div class="qe-toggle-title">
                <h4>dqwdwdwdwdw</h4>
            </div>
            <div class="qe-toggle-content" style="display: none;">
                <p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English.</p>
            </div>
        </div>
                <div id="qaef-683" class="qe-faq-toggle argentina">
            <div class="qe-toggle-title">
                <h4>asdasdasda</h4>
            </div>
            <div class="qe-toggle-content" style="display: none;">
                <p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English.</p>
            </div>
        </div>
                    </div>

Answer 1

Например, так:

$('.qe-faq-toggle').click(function() {
  if ($(this).find('.qe-toggle-content').is(':visible')) {
    $(this).find('i.fa').toggleClass('fa-chevron__turn');
    $(this).find('.qe-toggle-content').slideToggle('slow');
  } else {
    $(this).parent().find('i.fa').removeClass('fa-chevron__turn');
    $(this).parent().find('.qe-toggle-content').slideUp('slow');

    $(this).find('i.fa').toggleClass('fa-chevron__turn');
    $(this).find('.qe-toggle-content').slideDown('slow');
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="qae-faqs-container qae-faqs-toggle-container">
  <div id="qaef-685" class="qe-faq-toggle argentina">
    <div class="qe-toggle-title">
      <h4>ADasdad?</h4>
    </div>
    <div class="qe-toggle-content" style="display: none;">
      <p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content
        here, content here', making it look like readable English.</p>
    </div>
  </div>
  <div id="qaef-684" class="qe-faq-toggle argentina">
    <div class="qe-toggle-title">
      <h4>dqwdwdwdwdw</h4>
    </div>
    <div class="qe-toggle-content" style="display: none;">
      <p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content
        here, content here', making it look like readable English.</p>
    </div>
  </div>
  <div id="qaef-683" class="qe-faq-toggle argentina">
    <div class="qe-toggle-title">
      <h4>asdasdasda</h4>
    </div>
    <div class="qe-toggle-content" style="display: none;">
      <p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content
        here, content here', making it look like readable English.</p>
    </div>
  </div>
</div>

БЛОГ НА HUSL

Как сделать при открытии одного блока аккордеона, предыдущий открытый закрывался?

Ответы (1 шт):