CODEWITHSUNDEEP
jqueryjquery-uijquery-ui-accordion
Masih
Masih

Reputation: 1710

Expand all jquery-UI accordion

I was trying to build a jQuery-UI Accordion. Does someone know how I can make a button in order to make all expand.

Script:

$(function() {
    $( "#accordion" )
      .accordion({
        header: "> div > h3"
      })
      .sortable({
        axis: "y",
        handle: "h3",
        stop: function( event, ui ) {
          ui.item.children( "h3" ).triggerHandler( "focusout" );
          $( this ).accordion( "refresh" );
        }
      });
  });

http://jsfiddle.net/g0ogLhey/

Upvotes: 2

Views: 1571

Answers (1)

Nineoclick
Nineoclick

Reputation: 814

If you inspect the widget structure, you can see that .ui-accordion-content of each .ui-accordion-header classes has a simple css directive: display:none;.

Manipulating that directive in conjuntion with some other stuffs, accordions can be expanded or hidden all with one click.

Here's your fiddle updated with some lines of code to do what you want -> https://jsfiddle.net/g0ogLhey/1/

Excuse me for the not well organized code. It's late and surely with a bit of time available, it may be better written.

Consider my code as a starting point for improving yours.

Upvotes: 2

Related Questions