Nested Accordion using jQuery Plugin

Today we have a “BeefUp” jQuery plugin which we will use to create a nested accordion. Its a highly configurable and multi-purpose plugin that helps you to create the accordion easily.

You don’t need to write all the code from the start. Just implement this plugin and you are done. All you have to design it according to your project requirements.

The “BeefUp” accordion comes with basic design without having too much style. That’s means, you can easily apply your styles.

Furthermore, the nested accordion plugin comes with a lot of awesome options that you can use to change its way of work. It has an animation like sliding, fading, and scrolling.

Moreover, the plugin is perfect to use if you are planning to build an FAQ page or want to use it for general-purpose accordion navigation.

Additionally, you can also trigger your custom callback functions on accordion initialization, open and close.

How to Create jQuery Nested Accordion

To create the FAQs page or a nested accordion widget on your website, You need to load the jQuery library into your webpage.

<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>

After that, you need to load the plugins files. The plugin comes with two files which include CSS and Javascript file.

<!-- BeefUp CSS -->
<link rel="stylesheet" href="css/jquery.beefup.css">
<!-- BeefUp JS -->
<script src="js/jquery.beefup.min.js"></script>

Now let’s create the basic HTML structure which is easy to understand. Each list of the accordion element consists of an article element with a class beefup.

Next, we will place the heading of the accordion and body content. Have a look at the single accordion markup.

<article class="beefup example">
    <h4 class="beefup__head">
        Item 1
    </h4>
    <div class="beefup__body">
        <div class="mockup">Your content goes here</div>
    </div>
</article>

Let’s see you want to build a nested according to then our markup will look like:

<article class="beefup example">
    <h4 class="beefup__head">
        Item 1
    </h4>
    <div class="beefup__body">
        <article class="beefup example">
            <h4 class="beefup__head">
                Nested Item
            </h4>
            <div class="beefup__body">
                <div class="mockup mockup-lg">Content for nested items goes here.</div>
            </div>
        </article>
    </div>
</article>

The Javascript

Finally, we need to initialize the plugin by calling the jQuery document ready function to active the BeefUp plugin.

$(document).ready(function(){
    $('.example').beefup();
});

The plugin comes with a lot of options. Let’s says you want to keep open the accordion item then you simply need to define the function like:

// Open single
$('.example-opensingle').beefup({
    openSingle: true,
    stayOpen: 'last'
});

Similar, if you want to change the default animation into fade then your function will look like:

// Fade animation
$('.example-fade').beefup({
    animation: 'fade',
    openSpeed: 400,
    closeSpeed: 400
});

Advanced Configuration Options for jQuery Nested Accordion

Let’s check out the following advanced configuration options to create or customize the nested according to the plugin according to your needs.

$('.example').beefup({
	accessibility : true,
});

$('.example').beefup({
	trigger : '.beefup__head',
});

$('.example').beefup({
	content : '.beefup__body',
});

$('.example').beefup({
	openClass : 'is-open',
});

$('.example').beefup({
	animation : 'slide',
});

$('.example').beefup({
	openSpeed : 200,
});

$('.example').beefup({
	closeSpeed : 200,
});

$('.example').beefup({
	scroll : false,
});

$('.example').beefup({
	scrollSpeed : 400,
});

$('.example').beefup({
	scrollOffset : 0,
});

$('.example').beefup({
	openSingle : false,
});

$('.example').beefup({
	stayOpen : null,
});

$('.example').beefup({
	selfBlock : false,
});

$('.example').beefup({
	selfClose : false,
});

$('.example').beefup({
	hash : true,
});

$('.example').beefup({
	onOpen : null,
});

$('.example').beefup({
	onClose : null,
});

Changelog

Oct 5, 2019

• Add accessibility option
• Update button styles
• Prefix private methods
• Use jest instead of QUnit

09/28/2019

• Update sass-lint rules and browsers.
• Update the demo layout.
• Optimize the code.