CODEWITHSUNDEEP
javascriptjqueryhtmlaccordion
Anusha
Anusha

Reputation: 673

jQuery accordion Expand All

I have several accordions in this format.

<div id="accordion-0" class="jquery-accordion ui-accordion ui-widget ui-helper-reset" role="tablist">
<h3 class="some-class">Some other span elements here</h3></div>

In my page, I have a link that says Expand All, by clicking this link I want to be able to expand all my accordions.

<a href="javascript:expandAll(10);">
function expandAll(count) {
    for (i = 0; i <= count; i++) {
        $(function() {
            if ($("#accordion-" + i + " h3").attr("aria-selected") !== "true") {
                $("#accordion-" + i + " h3").click();

            }

        })
    }
}

Only the first accordion is getting expanded. I tried to put a console.log() in the for loop to print the value of i, but it is printing only 0 which means my loop is getting terminated after the first expansion. I am unable to understand this behavior.

Any help is welcome. Thanks :)

Upvotes: 1

Views: 8517

Answers (2)

Roshan Deuba
Roshan Deuba

Reputation: 1

html:

 <a href="#" id="accordion-0">Expand All</a>

jquery:

  $(#).click(function(){
     $(".ui-accordion-content").show();
  });

Upvotes: 0

Mayank Pandeyz
Mayank Pandeyz

Reputation: 26288

Try this:

$(".ui-accordion-content").show();

It will open all the accordion.

Working Fiddle

Upvotes: 5

Related Questions