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:

• Smart SEO-friendly jQuery Tabs Plugin - Magic Tabs

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 ...
</div>

$('.faq').magicAccordion({
  // 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.

$('.faq').magicAccordion({
  openOnLoad: 2
})

5. Customize the animation speed. Default: 200.

$('.faq').magicAccordion({
  speed: 500
})

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

$('.faq').magicAccordion({
  hashTrail: true,
})

7. More plugin options.

$('.faq').magicAccordion({

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

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

8. Event handlers.

$('.faq').magicAccordion({
  // options here
})
.on( 'opened.magic', function(e){
  console.log(e.head);
 }).on( 'closed.magic', function(e){
  console.log(e.body);
});

9. Destroy & re-init the accordion.

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

// destroy
app.unbind();

// re-init
app.rebind();

---

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