Question 36407 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

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

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 class="accordion-block">
<div class="container">
    <div class="gallery-wrap">
        <div class="item-accordion">
            <div class="accordion">
                    <div class="title text accordion-title”>Title of Accordion</div>

                <div class="animation-container">
                    <div class="hidden-textarea active-accordion”>
                        <div class="body text”>Lorem Ipsum </div>
                        <div class="buttonArrayV1”>Click Me</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="accordion-block">
<div class="container">
    <div class="gallery-wrap">
        <div class="item-accordion">
            <div class="roles-description accordion">
                    <div class="title text accordion-title”>Title of Accordion</div>

                <div class="animation-container">
                    <div class="hidden-textarea active-accordion">
                        <div class="body text”>Lorem Ipsum </div>
                        <div class="buttonArrayV1”>Click Me</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

CSS

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

.hidden-textarea {
  display: none;
}

JS

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) {
    }
  });
 };
Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    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);
      });

  2. 0

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

    $(this).find('.hidden-textarea').toggleClass('active-accordion');
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search