Blog

On this new tutorial, we’ll discover ways to construct an animated JavaScript accordion element with overlapping panels.

We received’t focus a lot on accessibility on this tutorial, so exploring find out how to make this element extra accessible could be a sound subsequent step.

Our Accordion Element

Right here’s what we will create (click on on a panel to check the habits):

1. Start With the Web page Markup

Inside a container, we’ll place an inventory of panels.

Every panel may have a title and content material. Throughout the title, we’ll add a Shut button from the place we are able to shut the energetic panel.

Right here’s the required construction:

Preliminary Accordion State/Lively Gadgets

By default, all panels might be collapsed.

To forestall this habits, we’ve to assign the energetic class to a number of panels like this: 

A number of Open Panels

There’s additionally the choice to have a couple of panel open concurrently with out one collapsing when the opposite is open. To allow this, we must always add the data-multiple=”true” attribute to the accordion wrapper like this:

2. Add the CSS

Let’s now consider the important thing kinds—a lot of the different kinds aren’t something particular, so let’s go away them for now:

• To make the panels overlap and create a special accordion format in comparison with the usual ones, we’ll give them a destructive prime margin and an equal backside padding. Just for the primary and final objects, we’ll cancel the highest margin and backside padding respectively. 
• To cover the content material of every panel, we’ll give them top: 0 and overflow: hidden. Then, as we’ll see later, by way of JavaScript, we’ll recalculate their top and reveal them easily. Simply, be aware that we’ll additionally use top: 0 !essential to reset the peak to 0 and override the JavaScript kinds for a beforehand energetic panel. 
• To open the modal, the entire panel space might be clickable. To make it clear, we’ll assign cursor: pointer to all panels. Quite the opposite, when a panel is open, we are able to shut it solely by way of the shut button. At this second, solely this button may have cursor: pointer whereas the panel may have cursor: default.

Right here’s part of the required kinds:

3. Add the JavaScript

The way in which we’ll animate every panel and obtain a slide impact just like jQuery’s slideToggle() perform is by benefiting from the scrollHeight property.

This property measures the peak of a component’s content material, together with content material not seen on the display on account of overflow. In our case, we’ll must calculate that worth for the .accordion-content components which have top: 0 and overflow: hidden by default.

When DOM Prepared

As a primary motion, when the DOM is prepared, we’ll verify if there are any energetic panels, and if that’s the case, we’ll set the peak for the .accordion-content component of every energetic panel equal to its scrollHeight property worth.

Right here’s the associated JavaScript code:

Toggle Accordion Panels

Subsequent, every time we click on on a panel, we’ll do the next issues:

1. Test if we clicked on the shut button. If that occurs and the panel is open, we’ll shut it by eradicating the energetic class and ignoring all the subsequent steps.
2. Test if we’ve set the choice to have a number of panels open collectively. If that isn’t the case and there’s an energetic panel, we’ll shut it.
3. Add the energetic class to that panel.
4. Set the peak for the .accordion-content component of this panel equal to its scrollHeight property worth.

Right here’s the JavaScript code that implements all that habits:

Conclusion

Finished! I hope you loved the JavaScript accordion we constructed and realized one or two new issues.

Earlier than closing, let’s recall our essential creation right this moment:

As at all times, thanks quite a bit for studying!