Как остановить jquery аккордеон

Question

Я пытаюсь сделать аккордеон, но он открывает все элементы, когда нажимает, как остановить все, и применяет только элемент, на который нажали.

JSfiDDle

$("#toggle>h4.vpm-tab-index").on("click", function(e) {
  e.stopPropagation();
  if ($('#toggle>div.vpm-content-tab').hasClass("closed")) {
    $("#toggle>div.vpm-content-tab").css("display", "block");
    $("#toggle>div.vpm-content-tab").removeClass('closed');
    $("#toggle>div.vpm-content-tab").addClass('opened');
  } else {
    $("#toggle>div.vpm-content-tab").removeClass('opened');
    $("#toggle>div.vpm-content-tab").addClass('closed');
    $("#toggle>div.vpm-content-tab").css("display", "none");
  }
});

.vpm-tab-index {
  border: 2px solid #ddd;
  padding: 15px;
  display: block;
  cursor: pointer;
}

.vpm-tab-index:before {
  content: "\f067";
  float: left;
  margin-right: 10px;
  font-family: fontawesome;
}

.vpm-content-tab {
  background: #f9f8f8;
  padding: 11px;
  margin-top: -11px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="toggle" class="toggle">
  <h4 class="vpm-tab-index tab-opened"><span class="icon-minus-sign"></span> Quick Info</h4>
  <div class="vpm-content-tab closed" style="display: none;">
    <p>Quite possibly the best customer service I have ever received from an online retailer.</p>
  </div>
</div>

<div id="toggle" class="toggle">
  <h4 class="vpm-tab-index tab-opened"><span class="icon-minus-sign"></span> Quick Info</h4>
  <div class="vpm-content-tab closed" style="display: none;">
    <p>Quite possibly the best customer service I have ever received from an online retailer.</p>
  </div>
</div>

Answer 1

1. Недопустимо использовать один и тот же идентификатор (#toggle) для более чем одного элемента.
2. Вы устанавливаете класс для всех div.vpm-content-tab элементы, в то время как вам нужно установить его только на следующем tab,

Как это:

(Обратите внимание, что вы можете связать метод jQuery так же, как я делаю в этом примере, подробнее об этом здесь: https://www.w3schools.com/jquery/jquery_chaining.asp)

$(".toggle>h4.vpm-tab-index").on("click", function(e) {
  e.stopPropagation();
  var tab = $(this).next();
  if (tab.hasClass("closed")) {
    tab.show().removeClass('closed').addClass('opened');
  } else {
    tab.hide().addClass('closed').remove('opened');
  }
});

.vpm-tab-index {
  border: 2px solid #ddd;
  padding: 15px;
  display: block;
  cursor: pointer;
}

.vpm-tab-index:before {
  content: "\f067";
  float: left;
  margin-right: 10px;
  font-family: fontawesome;
}

.vpm-content-tab {
  background: #f9f8f8;
  padding: 11px;
  margin-top: -11px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="toggle">
  <h4 class="vpm-tab-index tab-opened"><span class="icon-minus-sign"></span> Quick Info</h4>
  <div class="vpm-content-tab closed" style="display: none;">
    <p>Quite possibly the best customer service I have ever received from an online retailer.</p>
  </div>
</div>

<div class="toggle">
  <h4 class="vpm-tab-index tab-opened"><span class="icon-minus-sign"></span> Quick Info</h4>
  <div class="vpm-content-tab closed" style="display: none;">
    <p>Quite possibly the best customer service I have ever received from an online retailer.</p>
  </div>
</div>