Question

35

How to open and collapse the same JQuery accordion with click on it only

rated 0 times [ 40] [ 5] / answers: 1 / hits: 45044 / 9 Years ago, tue, march 17, 2015, 12:00:00

Trying to get the accordion open and collapse only when it's being clicked. I am able to open/collapse it but it is getting closed also when another accordion is clicked.

It should open or close on its own - independently from other accordions.

This is what I have tried.

JS:

$(document).on(click, .accordion-toggle, function () {

        if ($(this).attr('class').indexOf('open') == -1)

   $(this).toggleClass(open).next().slideToggle('fast');

        //Hide the other panels

        $(.accordion-toggle).not($(this)).removeClass(open);

        $(.accordion-content).not($(this).next()).slideUp('fast');

    });

Fiddle:
Demo

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

turnerf

Add To Favorites

Follow

Total Points: 620

Total Questions: 101

Total Answers: 109

Location: French Polynesia

Member since Tue, Jul 7, 2020

4 Years ago

turnerf questions

1 Cannot read properties of undefined (reading 'display')

Thu, Oct 7, 21, 00:00, 3 Years ago

1 How should I import JSON in Node?

Sat, Mar 20, 21, 00:00, 3 Years ago

1 How to call a function every x seconds with updated state (React)

Tue, Jul 28, 20, 00:00, 4 Years ago

1 NestJS/swagger: what model is the ApiExtraModel expecting as a parameter?

Fri, Apr 10, 20, 00:00, 4 Years ago

1 TypeError: Cannot destructure property id of req.params as it is undefined

Sat, Apr 4, 20, 00:00, 4 Years ago

View All

answered 9 Years ago justynkaina · Accepted Answer

I have created a new fiddle with some css...

HTML

<div class=accordion-container>

    <a href=# class=accordion-toggle>Heading 1</a>

    <div class=accordion-content>

        Content 1

    </div>

</div>

<div class=accordion-container>

    <a href=# class=accordion-toggle>Heading 2</a>

    <div class=accordion-content>

        Content 2

    </div>

</div>

<div class=accordion-container>

    <a href=# class=accordion-toggle>Heading 3</a>

    <div class=accordion-content>

        Content 3

    </div>

</div>

JS

$(document).ready(function () {

    $('.accordion-toggle').on('click', function(event){

        event.preventDefault();

        // create accordion variables

        var accordion = $(this);

        var accordionContent = accordion.next('.accordion-content');



        // toggle accordion link open class

        accordion.toggleClass(open);

        // toggle accordion content

        accordionContent.slideToggle(250);



    });

});

please check this fiddle