The jQuery UI filter converts static HTML to a jQuery UI accordion or tabs widget.

For example, this module converts the below HTML code into a collapsed jQuery UI 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>


Learn more about jQuery UI's accordion and tabs widget.


Watch the Drupal 8: jQuery UI filter 8.x-2.x Demo screencast to see this module in action.



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


Use [tabs] and [/tabs] to create a jQuery UI tabs.


  • Supports all jQuery UI accordion and tabs options.
  • Adds bookmark support to accordions and tabs.
  • Scrolls to bookmarked accordion or tabs.
  • Gracefully degrades when JavaScript is disabled.
  • Defaults to original markup when an accordion or tabs widget is printed.


  1. Copy/upload the jquery_ui_filter.module to the modules directory of your Drupal installation.
  2. Enable the 'jQuery UI filter' modules in 'Extend'.
  3. Visit the 'Configuration > Content authoring > Text formats and editors'
  4. Enable (check) the jQuery UI filter under the list of filters and save the configuration.
  5. IMPORTANT: In 'Filter processing order', the 'jQuery UI accordion and tabs widgets' filter must be after the 'Correct faulty and chopped off HTML' filter.
  6. (optional) Visit the 'Configuration > Content authoring > Text formats and editors > jQuery UI filter'


Drupal 6 & 7

The Drupal 6 & 7 version of this module is minimally maintained, any reasonable
patches will be applied.

Drupal 8

The Drupal 8 version of this module is a complete rewrite that moves the conversion of HTML header tags to a JQuery UI accordion or tabs widgets into a JavaScript library that uses data attributes to trigger the conversion.

The configuration settings have been simplifed to support future versions of jQuery UI.

Please note, Drupal 8 core now supports jQuery UI dialog handling so this functionality has been removed from the module.



  • Goal is to keep this module as simple as possible.
  • Make it easy for developers and site builders to provide custom configuration.
  • Allow accordion and tabs widgets to still be extended and enhanced with custom code.

For Site Builders

  • Any jQuery UI accordion or tabs option is supported.
  • The [token] options can contain valid JSON data which will be converted to JavaScript array and objects when a widget is rendered.
    • JSON data must be valid.
    • JSON can be wrapped in single quote instead of double quotes.
    • JSON parsing errors will logged to the browser's console.
    • The below example would create sliding tabs.
      [tabs show='{"effect": "slideDown", "duration": 1000}' hide='{"effect": "slideUp", "duration": 1000}']

For Developers

  • 75% of this module's core code is in jquery_ui_filter.js, which transforms HTML5 <div> tags containing data-ui-* attributes into jQuery UI accordion and/or tabs with customize options.
  • The actually filter \Drupal\jquery_ui_filter\Plugin\Filter\jQueryUiFilter just transforms [tokens] with options into <div> tags with
    data-ui-* attributes. Example:
    <p>[accordion collapsed customAttribute="some value"]</p> transformed into...
    <div data-ui-role-"accordion" data-ui-collapsed="true" data-ui-custom-attributes="some value">
  • All camelCase options will be convert to lower case hyphen delimited attributes, which are supported by HTML5. The hyphen delimited attributes will be converted back into camelCase options when the widget is rendered.
  • A JsFiddle example has been setup to allow cross-browser testing and debugging outside of Drupal.
  • The tests directory contains manual test scripts and static HTML5 examples for testing the front end JavaScript behavior.


  • Quick tabs
    Create blocks of tabbed views and blocks.


Project Information