Smart User-friendly jQuery Accordion Plugin - Magic Accordion

File Size: 7.3 KB
Views Total: 534
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
Smart User-friendly jQuery Accordion Plugin - Magic Accordion

The Magic Accordion jQuery plugin provides a simple, automatic solution for generating smooth vertical accordions from existing page content. 

It intelligently converts headings (default: <h2>) into accordion headers and the elements below them into accordion bodies, which helps developers organize and display information in a user-friendly manner.

Perfect for FAQ, blog posts or articles with multiple sections, tutorial or Step-by-Step guides, and more.

See Also:

How to use it:

1. Insert the Magic Accordion's script into your jQuery project.

<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/jquery.magic-accordion.js"></script>

2. Call the plugin on your content container.

<div class="faq">
  <h2>Accordion 1</h2>
  ... Accordion 1 Content ...

  <h2>Accordion 2</h2>
  ... Accordion 2 Content ...

  <h2>Accordion 3</h2>
  ... Accordion 3 Content ...
  // options here

3. Apply CSS styles to the accordion.

.body { 
  /* accordion body */

.head { 
  /* accordion header */

.active {
  /* active styles */

4. Specify which accordion item should open on page load. Default: 1.

  openOnLoad: 2

5. Customize the animation speed. Default: 200.

  speed: 500

6. Determine whether to auto-update the hashtag in the URL. Default: false.

  hashTrail: true,

7. More plugin options.


  // selector of accordion header
  headingTag : 'h2',

  // default CSS classes
  bodyClass : 'body',
  headClass : 'head',
  activeClass : 'active',
  // easing function
  easing : 'linear',

8. Event handlers.

  // options here
.on( 'opened.magic', function(e){
 }).on( 'closed.magic', function(e){

9. Destroy & re-init the accordion.

var app = $('.faq').data( 'magic-accordion' );

// destroy

// re-init

This awesome jQuery plugin is developed by lukesnowden. For more Advanced Usages, please check the demo page or visit the official website.