Прекратить действие клика на этом

Question

Я делаю простой аккордеон FAQ с использованием jQuery, и я пытаюсь отключить дополнительный щелчок на this, потому что при нажатии this он просто снова скользит вверх, как и тот, который нажимается снова.

Как я могу отключить щелчок или отключить действие, когда оно перемещается вверх и вниз снова после нажатия кнопки (той, которую нажимали)?

(function($) {
  $('.c-accordion__panel').hide();
  $('.c-accordion__heading').click(function() {
    $('.c-accordion__panel').slideUp('fast'); //slide up panel
    $(this).parent('div').children('.c-accordion__panel').slideDown('fast'); //slide down panel
  });
})(jQuery);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section id="faqs" class="clearfix pb3">
  <div class="col-12">
    <h3 class="pb3">Colocation FAQ</h3>
    <div class="c-accordion">
      <div class="c-accordion__heading flex justify-between border">
        <h4>heading 1</h4>
        <i class="fas fa-chevron-right"></i>
      </div>
      <div class="c-accordion__panel active">
        <p>this one has active Mumblecore biodiesel semiotics vice, sustainable banh mi ennui irony vape waistcoat drinking vinegar banjo scenester put a bird on it kickstarter. Dreamcatcher forage tousled gluten-free, taiyaki 3 wolf moon truffaut. Next
          level vinyl kinfolk, beard fanny pack biodiesel pinterest cold-pressed tumeric venmo franzen affogato disrupt wolf 90's. </p>
      </div>
    </div>
    <div class="c-accordion">
      <div class="c-accordion__heading flex justify-between border">
        <h4>heading2</h4>
        <i class="fas fa-chevron-right"></i>
      </div>
      <div class="c-accordion__panel">
        <p>Mumblecore biodiesel semiotics vice, sustainable banh mi ennui irony vape waistcoat drinking vinegar banjo scenester put a bird on it kickstarter. Dreamcatcher forage tousled gluten-free, taiyaki 3 wolf moon truffaut. Next level vinyl kinfolk,
          beard fanny pack biodiesel pinterest cold-pressed tumeric venmo franzen affogato disrupt wolf 90's. </p>
      </div>
    </div>
    <div class="c-accordion">
      <div class="c-accordion__heading flex justify-between border">
        <h4>heading3</h4>
        <i class="fas fa-chevron-right"></i>
      </div>
      <div class="c-accordion__panel">
        <p>Mumblecore biodiesel semiotics vice, sustainable banh mi ennui irony vape waistcoat drinking vinegar banjo scenester put a bird on it kickstarter. Dreamcatcher forage tousled gluten-free, taiyaki 3 wolf moon truffaut. Next level vinyl kinfolk,
          beard fanny pack biodiesel pinterest cold-pressed tumeric venmo franzen affogato disrupt wolf 90's. </p>
      </div>
    </div>
  </div>
</section>

Answer 1

Я бы изменил ваш javascript на этот

(function ($) {
        $('.c-accordion__panel').hide();
        $('.c-accordion__heading').click(function(){
            $('.c-accordion__panel').slideUp('fast'); //slide up panel
            if($(this).parent('div').children('.c-accordion__panel').is(':hidden')){
               $(this).parent('div').children('.c-accordion__panel').slideDown('fast'); //slide down panel
            }

        });
    })(jQuery);

Answer 2

Элемент, по которому щелкнули, - .c-accordion__heading, а элемент, для которого вы хотите вызвать slideUp, - .c-accordion__panel, который является следующим родным братом. Таким образом, вы можете добавить .not($(this).next()) перед вызовом slideUp:

(function($) {
  $('.c-accordion__panel').hide();
  $('.c-accordion__heading').click(function() {
    $('.c-accordion__panel').not($(this).next()).slideUp('fast'); //slide up panel
    $(this).parent('div').children('.c-accordion__panel').slideDown('fast'); //slide down panel
  });
})(jQuery);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section id="faqs" class="clearfix pb3">
  <div class="col-12">
    <h3 class="pb3">Colocation FAQ</h3>
    <div class="c-accordion">
      <div class="c-accordion__heading flex justify-between border">
        <h4>heading 1</h4>
        <i class="fas fa-chevron-right"></i>
      </div>
      <div class="c-accordion__panel active">
        <p>this one has active Mumblecore biodiesel semiotics vice, sustainable banh mi ennui irony vape waistcoat drinking vinegar banjo scenester put a bird on it kickstarter. Dreamcatcher forage tousled gluten-free, taiyaki 3 wolf moon truffaut. Next
          level vinyl kinfolk, beard fanny pack biodiesel pinterest cold-pressed tumeric venmo franzen affogato disrupt wolf 90's. </p>
      </div>
    </div>
    <div class="c-accordion">
      <div class="c-accordion__heading flex justify-between border">
        <h4>heading2</h4>
        <i class="fas fa-chevron-right"></i>
      </div>
      <div class="c-accordion__panel">
        <p>Mumblecore biodiesel semiotics vice, sustainable banh mi ennui irony vape waistcoat drinking vinegar banjo scenester put a bird on it kickstarter. Dreamcatcher forage tousled gluten-free, taiyaki 3 wolf moon truffaut. Next level vinyl kinfolk,
          beard fanny pack biodiesel pinterest cold-pressed tumeric venmo franzen affogato disrupt wolf 90's. </p>
      </div>
    </div>
    <div class="c-accordion">
      <div class="c-accordion__heading flex justify-between border">
        <h4>heading3</h4>
        <i class="fas fa-chevron-right"></i>
      </div>
      <div class="c-accordion__panel">
        <p>Mumblecore biodiesel semiotics vice, sustainable banh mi ennui irony vape waistcoat drinking vinegar banjo scenester put a bird on it kickstarter. Dreamcatcher forage tousled gluten-free, taiyaki 3 wolf moon truffaut. Next level vinyl kinfolk,
          beard fanny pack biodiesel pinterest cold-pressed tumeric venmo franzen affogato disrupt wolf 90's. </p>
      </div>
    </div>
  </div>
</section>