Jquery UI accordion that keeps multiple sections open?

javascript

responsive-design

best-practices

callbacks

byAlex Kataev·Jan 21, 2025

$(".multi-accordion").accordion({
  // Because who likes restrictions, right? 😉
  collapsible: true,
  // Like your heart, let's have no active sections initially 😄
  active: false
});

Set collapsible: true and active: false in jQuery UI accordion. This configuration allows users to independently toggle each section open or closed.

To even further flex the default behavior, consider beforeActivate event and prevent the default action:

$(".multi-accordion").on("accordionbeforeactivate", function(event, ui) {
  // "Don't tell me what to do" - Your accordion 
  event.preventDefault();
});

This prevents the default action allowing you to take control of how accordion headers behave, enabling multiple sections to be open simultaneously.

Break Down & Going Custom //

Unique Identifiers: "You're special!"

Ensure each panel has a unique identifier. It's pivotal for maintaining a seamless user experience as, without it, your accordion may begin to behave as unpredictably as a kid in a toy store.

Jazz Up Transitions: "Smooth Operator"

$(".accordion-header").click(function() {
  // Slower than a sloth crossing the road...
  $(this).next().toggle('slow');
});

Give that visually pleasing feel to your transitions by using a 'slow' toggle. Just like adding butter to your toast, it smoothens everything!

Plugins & Alternatives: "All roads lead to Rome"

There are many plugins out there as well as custom solutions. Some, like Anas Nakawa's multi-open accordion plugin, might be dated but can serve as a creative inspiration for your code.

Hands-On With Practical Examples

Learning from jsFiddle examples can get you hands-on quicker than learning to ride a bicycle. Highly suggested!

The Last Bobs & Bits

Cross-Device Compatibility: "One size fits all, eh?"

Ensure your accordion is compatible and performs seamlessly across varied devices and contains all sorts of content types. A responsive accordion makes for a happy user.