jQuery UI filter demo

The jQueryUI filter converts static HTML to a JQuery UI accordian or tabs widget.

For example, this module converts the below HTML code into a collapsed jQueryUI accordion widget

<p>[accordion collapsed]</p>
  <h3>Section I</h3>
  <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
  <h3>Section II</h3>
  <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
  <h3>Section III</h3>
  <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
<p>[/accordion]</p>

Learn more about jQueryUI's accordion and tabs widget.

Don't forget to roll your own custom jQuery UI theme

Usage

Use [accordion] and [/accordion] or [tabs] and [/tabs] to create a jQuery UI accordian or tabs. Using [accordion collapsed] will start with the accordion closed.

Features

  • Full UI for customizing most jQuery UI tabs and accordion options.
  • Adds paging buttons to tabs.
  • Gracefully degrades when JavaScript is disabled.

Requirements

Drupal 6

  • jQuery UI: Provides the jQuery UI plug-in to other Drupal modules.
  • jQuery Update: Updates Drupal to use the latest version of jQuery.

Drupal 6 & 7

  • jQuery plugins: An API and home for miscellaneous jQuery plugins.
    (Optional: Used to store jQuery UI tabs state in a cookie.)

Customization

Besides using the UI for customizing your jQuery UI tabs and accordion options you can define default options by adding the the below JavaScript snippets to your theme's script.js file.

(function ($) {
// Set Jquery UI Filter default options
Drupal.jQueryUiFilter = Drupal.jQueryUiFilter || {}
// Set Jquery UI tabs options
Drupal.jQueryUiFilter.tabsOptions = {
  event: 'click',
  fx: {opacity: 'toggle'},
  paging: true
}
// Set Jquery UI accordion options
Drupal.jQueryUiFilter.accordionOptions = {
  autoHeight: false
}
})(jQuery);

Similar Modules

Project Information

Downloads