CODEWITHSUNDEEP
jqueryhtmlcss
RiotAct
RiotAct

Reputation: 773

Add class to custom jQuery accordion

I just needed a simple accordion script and didn't want to deal with the bloat of the jQuery accordion widget and found this one online. It works just fine but I would like to know if I can add a class like active to an opened accordion block.

Here is the script:

$(document).ready(function($) {
  $('#accordion').find('.accordion-toggle').click(function() {

    //Expand or collapse this panel
    $(this).next().slideToggle('fast');

    //Hide the other panels
    $(".accordion-content").not($(this).next()).slideUp('fast');

  });
});
.accordion-toggle {
  cursor: pointer;
}

.accordion-content {
  display: none;
}

.accordion-content.default {
  display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="accordion">
  <h4 class="accordion-toggle">Accordion 1</h4>
  <div class="accordion-content default">
    <p>Cras malesuada ultrices augue molestie risus.</p>
  </div>
  <h4 class="accordion-toggle">Accordion 2</h4>
  <div class="accordion-content">
    <p>Lorem ipsum dolor sit amet mauris eu turpis.</p>
  </div>
  <h4 class="accordion-toggle">Accordion 3</h4>
  <div class="accordion-content">
    <p>Vivamus facilisisnibh scelerisque laoreet.</p>
  </div>
</div>

Upvotes: 1

Views: 1199

Answers (1)

Mosh Feu
Mosh Feu

Reputation: 29267

Sure, like in this code (using .addClass method)

$(document).ready(function($) {
  $('#accordion').find('.accordion-toggle').click(function() {

    //Expand or collapse this panel
    $(this).next().addClass('active').slideToggle('fast');

    //Hide the other panels
    $(".accordion-content").not($(this).next()).removeClass('active').slideUp('fast');

  });
});
.accordion-toggle {
  cursor: pointer;
}

.accordion-content {
  display: none;
}

.accordion-content.default {
  display: block;
}

/* just to demo the .active class */
.active {
  background: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="accordion">
  <h4 class="accordion-toggle">Accordion 1</h4>
  <div class="accordion-content default active">
    <p>Cras malesuada ultrices augue molestie risus.</p>
  </div>
  <h4 class="accordion-toggle">Accordion 2</h4>
  <div class="accordion-content">
    <p>Lorem ipsum dolor sit amet mauris eu turpis.</p>
  </div>
  <h4 class="accordion-toggle">Accordion 3</h4>
  <div class="accordion-content">
    <p>Vivamus facilisisnibh scelerisque laoreet.</p>
  </div>
</div>

I styled to .active with background: red to display the effect of .active

Upvotes: 1

Related Questions