Javascript/jQuery - Accordion onclick need to open only current div not all-CodePudding

I’m trying to build an accordion menu and for some reason I can’t get the accordion to function how I want.

Currently when the user clicks on the accordion div, the hidden-textarea div gets added with an active-accordion class wherever it's referenced.

How do I get the active-accordion class to only be added to the current clicked accordion div? Not all of them. I need to be able to toggle between each accordion div that is clicked.

Any help is gladly appreciated.

Thanks!

HTML

<div >
<div >
    <div >
        <div >
            <div >
                    <div animation-container">
                    <div body text”>Lorem Ipsum </div>
                        <div accordion-block">
<div >
    <div >
        <div >
            <div >
                    <div animation-container">
                    <div >
                        <div buttonArrayV1”>Click Me</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

CSS

.active-accordion {
 display: block !important;
}

.hidden-textarea {
  display: none;
}

TestJs.HorizontalAccordion.prototype.onResize = function() {
$(window).resize(function() {

    if ($(window).width() < 1200) {

      $('.accordion').on( "click", function(e) {
         e.preventDefault();
         e.stopPropagation();

         $(".hidden-textarea").addClass("active-accordion");
//           $('.hidden-textarea').removeClass("active-accordion");
//           $('.hidden-textarea').toggle("active-accordion");
        return false;
      });
    }
    if ($(window).width() >= 1200) {
    }
  });
 };

CodePudding user response：

Update: I updated the onclick function and am able to toggle successfully. Now I just need to open 1 accordion not all of them.

Any help is gladly appreciated. Thank you.

  $('.horizontalAccordionV1 .accordion').on( "click", function() {
                event.preventDefault();
                // create accordion variables
                var accordion = $('.hidden-textarea');

                // toggle accordion link open class
                accordion.toggleClass("active-accordion");
                // toggle accordion content
                accordionContent.slideToggle(250);
      });

CodePudding user response：

Problem solved! Added this to my JS click function and removed everything else.

$(this).find('.hidden-textarea').toggleClass('active-accordion');