HOME / LAB >

JQuery Accordion

Published: 26/06/2019 Categories: Coding, Javascript Leave a comment

One of the tedious things to do in the web is to make transitions smooth. It gets more tedious when it involves JQuery and a handful of different elements that have to be animated.

At some point, it’s almost certain that things will get laggy. Here is an accordion which operates smoothly, and has multiple/single open elements functionality.

See the Pen JQuery Accordion by cheBandoneon (@cheBandoneon) on CodePen.0

 

To implement this to your website you only need the classes ‘jsAccordionItem’ , ‘jsAccordionContent’, ‘jsAccordionToggle’ in your html. The wrapper of the accordion can be named as you wish.

After you create the markup, you can instantiate the accordion using the below code.

var accordion = new Accordion({ selector : '.jsAccordion' , multiple: true, speed: 300});
accordion.init();

As you can see we give a few options to the accordion Object, which are the selector of the accordion element, if it has multiple functionality, and the speed.

That’s all you need to do! Have fun adding multiple accordions to your site with just two lines of code!