CODEWITHSUNDEEP
jqueryaccordion
Firefog
Firefog

Reputation: 3174

how to stop jquery accordion - onclick opening all accordion

I am trying to make an accordion but it open all item when click how to stop all and apply only the item clicked.

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>

Upvotes: 2

Views: 355

Answers (1)

Mosh Feu
Mosh Feu

Reputation: 29337

  1. It's not valid to use the same id (#toggle) for more than one element.
  2. You set the class for all the div.vpm-content-tab elements while you need to set it only on the next tab.

Like this:

(Notice that you can chaining jQuery method just like I do in the example, read more about it here: 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>

Upvotes: 2

Related Questions