jQuery Accordian only working on first element in list

Question

I am trying to create an accordion element that can be used throughout my website. I've managed to get the logic working, sort off... I will select any of the accordions to open and effectively add a class called 'show', however it only works for the first accordion in the parent container holding each accordion element.

And sometimes it opens all of them at once, I want it to have to functionality of the user being able open and close any of the accordions displayed on the page.

(function ($) {

    $(".accord").on("click", function (e) {
    
    console.log(this);
    
      $(".accordian-content").toggleClass("show");

    });

  })(jQuery);

.accord {
    background-color: $primary;
    color: #111;
    cursor: pointer;
    padding: 10px;
    width: 100%;
    text-align: left;
    border: none;
    outline: none;
    transition: 0.4s;
  }
  .accordian-content {
    display: none;
  }

  .accordian-content.show {
    display: block;
  }

user_19373759 · Answer

Your line $(".accordian-content").toggleClass("show"); searches the entire DOM-Tree for all matching elements that have the class '.accordian-content', and toggling the class show for all those elements.

As your content is always a child of the .accord element, you can use $(this) in the click callback to recieve the clicked element. With this, we can then use .find(SELECTOR) to search the childs for a matching element, in this case .accordian-content. This will result in the expected element to show.

(function ($) {

    $(".accord").on("click", function (e) {
    
    // Changed this Line to find the Accordian-content thats a child of the clicked 'accord'-button
      $(this).find('.accordian-content').toggleClass("show");

    });

  })(jQuery);

.accord {
    background-color: $primary;
    color: #111;
    cursor: pointer;
    padding: 10px;
    width: 100%;
    text-align: left;
    border: none;
    outline: none;
    transition: 0.4s;
  }
  .accordian-content {
    display: none;
  }

  .accordian-content.show {
    display: block;
  }

user_6488626 · Answer

There may be a more efficient method, but I've always found that using unique identifiers to pick up which item has been clicked and apply that ID to the accordian template works best.

I've added some ID's to your text, and changed the javascript slightly to apply the number from the clicked div to the accordian content control.

The added benefit of the unique id method is that if you wanted to open the page and target a specific accordian to open on load, it can be done via the ID, whereas it gets a little more complicated without an ID. That may or may not be something you need to accomplish.

(function ($) {

    $(".accord").on("click", function (e) {
    
    let accordian = this.id.replace('accord', 'accordian-content')
    
      $('#' + accordian).toggleClass("show");

    });

  })(jQuery);

.accord {
    background-color: $primary;
    color: #111;
    cursor: pointer;
    padding: 10px;
    width: 100%;
    text-align: left;
    border: none;
    outline: none;
    transition: 0.4s;
  }
  .accordian-content {
    display: none;
  }

  .accordian-content.show {
    display: block;
  }

jQuery Accordian only working on first element in list

2 Answers