On click add or remove class from div

Question

I have a markup that looks like the following:

<div class="accordion is-open">
    <h3 class="accordion-header">
        HADER
        <span class="accordion-indicator"></span>
    </h3>
    <div class="accordion-content"></div>
</div>

<div class="accordion is-open">
    <h3 class="accordion-header">
        HADER
        <span class="accordion-indicator"></span>
    </h3>
    <div class="accordion-content"></div>
</div> 

<div class="accordion">
    <h3 class="accordion-header">
        HADER
        <span class="accordion-indicator"></span>
    </h3>
    <div class="accordion-content"></div>
</div> 

What I am trying to do is to use jquery to add or remove class .is-opened to div with class .accordion when class .accordion-header

My problem is that some of the divs already contain class .is-opened and some don't. I need to be able to click and open (add class .is-opened) only that specific div that was clicked.

Here is my jQuery:

function accordionOpener(obj) {
    var accordionHeader = obj.find('.accordion-header');
    var accordionBody = obj.find('.accordion');
    accordionHeader.on('click',function(){
        $(accordionBody).toggleClass('is-open');
    });
}
new accordionOpener($(this));

I am not a big pro in jQuery, JavaScript so speak to me as if I am 10 yeas old.

Answer 1

Your logic isn't quite correct. To fix this attach a click event handler directly to the .accordion-header class. From there you can use DOM traversal to find the related .accordion element and toggle the class. Try this:

$(function() {
  $('.accordion-header').click(function() {
    $(this).closest('.accordion').toggleClass('is-open');
  });
});

.is-open { color: #C00; } /* this is only to see the class being added/removed */

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="accordion is-open">
  <h3 class="accordion-header">
        HADER
        <span class="accordion-indicator"></span>
    </h3>
  <div class="accordion-content"></div>
</div>

<div class="accordion is-open">
  <h3 class="accordion-header">
        HADER
        <span class="accordion-indicator"></span>
    </h3>
  <div class="accordion-content"></div>
</div>

<div class="accordion">
  <h3 class="accordion-header">
        HADER
        <span class="accordion-indicator"></span>
    </h3>
  <div class="accordion-content"></div>
</div>

Answer 2

You could simple use the jQuery UI Accordion plugin: https://jqueryui.com/accordion/ simply wrap all elements in a div and change your headline to a h3 tag. You invoke the plugin like the following:

$('.accordion').accordion();

This plugin also provides keyboard access and some other accessibility features.