JQUERY Uİ MULTİ OPEN ACCORDİON(RESPONSİVE MOBİLE FRİENDLY)

Today when I was building a web application interface, I was trying to use jQuery UI Accordion, but I didn’t want it to open one tab at a time, I just wanted each accordion tab to toggle between open and close states while pressing it, so I can have more than one tab opened, what I wanted was not a feature of jQuery UI’s Accordion, so I tried to look up over the internet if I can find any suitable solution, but could not find anything, so I decided to make the plugin myself, it works the same way original jQuery UI Accordion do, below you can find the markup and script required to run this plugin.

DEMO

DOWNLOAD

MARKUP:

<div id="multiAccordion">

  <h3><a href="#">tab 1</a></h3>

  <div>

    Lorem ipsum dolor sit amet

  </div>

  <h3><a href="#">tab 2</a></h3>

  <div>

    Lorem ipsum dolor sit amet

  </div>

  <h3><a href="#">tab 3</a></h3>

  <div>

    Lorem ipsum dolor sit amet

  </div>

  <h3><a href="#">tab 4</a></h3>

  <div>

    Lorem ipsum dolor sit amet

  </div>

</div>

SCRİPT

$(function(){
  $('#multiAccordion').multiAccordion();
});

UPDATE

$(function(){

  // this will make the second tab by default opened (index starts from 0)
  $('#multiAccordion').multiAccordion({active: 1 }); 

  // [ OR ]
  // supports multiple tabs to be opened by default
  $('#multiAccordion').multiAccordion({active: [1, 2, 3] }); 

  // show all tabs
  $('#multiAccordion').multiAccordion({active: 'all' });

  // hide all tabs
  $('#multiAccordion').multiAccordion({active: 'none' });

  // you can set the options as any jQuery UI plugin using option method
  $('#multiAccordion').multiAccordion('option', 'active', 'all');
});

you have the option to choose which tabs by default will be opened by passing either a number or array of desired open tabs to active option as follows:

Events

/* fired when any tab is clicked, ui here hold clicked tab and its content
   * ui['tab']      // current tab
   * ui['content']  // current tab content (div)
   */
  click: function(event, ui) {}

  // when accordion is initialized, ui here holds a jQuery object to the whole accordion
  init: function(event, ui) {}

  // when tab is shown, ui here hold the same as in click event above
  tabShown: function(event, ui) {}

  // when tab is hidden, ui here hold the same as in click event above
  tabHidden: function(event, ui) {}

  // How can you bind these events ?

  // 1. at plugin initialization
  $('#multiAccordion').multiAccordion({
    active: 'all',
    click: function(event, ui) {
      alert('tab is clicked!');
    }
  });

  // 2. after initialization
  $('#multiAccordion').multiAccordion('multiAccordionclick', function(){
    alert('also clicked');
  });

METHODS

// destroying the plugin and removing all handlers, and styles
$('#multiAccordion').multiAccordion('destroy');

// get an array of active tabs, if no active tabs it will return a one element array with [-1] value 
$('#multiAccordion').multiAccordion('getActiveTabs');

// you can use the previous method to get active tabs value, then you can set it later simply by
// retrieve
var activeTabs = $('#multiAccordion').multiAccordion('getActiveTabs');
// set
$('#multiAccordion').multiAccordion('option', 'active', activeTabs);

using jQuery UI widget framework fixed: browser goes to the top on tab click fixed: events binding repeated when calling plugin more than once enhancement: adding click, tabShown, tabHidden, and init event bindings enhancement: adding show all & hide all tabs

Continue Reading