Nested Accordion using jQuery Plugin

Category: Accordion | November 20, 2019
Nested Accordion using jQuery Plugin
Author: Schascha
Official Page: Go to Website
Last Update:December 22, 2019
License:MIT

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.

Because it supports the nested option so you can easily add the multiple groups which can be expanded/collapse their content when selected.

You are allowed to add the text, images, iframe and video content inside the accordion widget or inside the nested accordion.

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.

OptionDefaultTypeDescription
accessibilitytrueBooleanEnable/disable accessibility features like tab control. Example:

$('.example').beefup({
	accessibility : true,
});
trigger‘.beefup__head’StringThe selector of the trigger element.Example:

$('.example').beefup({
	trigger : '.beefup__head',
});
content‘.beefup__body’StringThe class name of collapsible content.Example:

$('.example').beefup({
	content : '.beefup__body',
});
openClass‘is-open’StringThe name of the class that determines that accordion item is open or not.Example:

$('.example').beefup({
	openClass : 'is-open',
});
animation‘slide’StringAnimation that toggles contents. Possible options are “slide” and “fade”.Example:

$('.example').beefup({
	animation : 'slide',
});
openSpeed200NumberIt defines the open speed in milliseconds. Example:

$('.example').beefup({
	openSpeed : 200,
});
closeSpeed200NumberThe close speed in milliseconds.Example:

$('.example').beefup({
	closeSpeed : 200,
});
scrollfalseBooleanDecide whether to scroll the window on the content toggle. Example:

$('.example').beefup({
	scroll : false,
});
scrollSpeed400NumberThe scrolling speed in milliseconds.Example:

$('.example').beefup({
	scrollSpeed : 400,
});
scrollOffset0NumberIt is useful to set additional offset. Example:

$('.example').beefup({
	scrollOffset : 0,
});
openSinglefalseBooleanClose other opened elements when opening a new one.Example:

$('.example').beefup({
	openSingle : false,
});
stayOpennullNullRemain items to be open. You can pass selector, item index value in this option. Example:

$('.example').beefup({
	stayOpen : null,
});
selfBlockfalseBooleanBlock close event on click. Example:

$('.example').beefup({
	selfBlock : false,
});
selfClosefalseBooleanDecide whether to close when clicking outside the accordion. Example:

$('.example').beefup({
	selfClose : false,
});
hashtrueBooleanOpen accordion with id on hash change.Example:

$('.example').beefup({
	hash : true,
});
onOpennullFunctionCallback function to execute on accordion open. Example:

$('.example').beefup({
	onOpen : null,
});
onClosenullFunctionCustom function to run on a close event. Example:

$('.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.

You May Also Like

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.