Extending the jQuery UI Accordion

Where can I download Sample chapters?

Who is the Book Author?

’ element and the content section has a para ‘

’ as a container. The content section can contain any kind of data. In order to make an accordion of this markup, just add a single line of jQuery code:

and that’s it. You have an Accordion control!

You can pass some configuration options to change the way the default accordion behaves. To set configuration options, we will pass an object literal into the accordion as shown below:

$(function () {
    $("#faq").accordion({
        "optionname": "value"
    });
});

For example, the Accordion sets an equal height for all the Panels by setting the heightStyle to auto, which means all panels will be of the same height as the tallest panel. This leads to extra whitespace in those content panels where the content is less

In order to fix this, set the heightStyle to content which means each panel will be only as tall as its content.

$("#faq").accordion({
    event: "mouseover",
    collapsible: true,
    active: 2,
    heightStyle: 'content'
});

View the page in the browser and you will see that the 2^nd panel is now only high enough to contain its own content.

Extending the jQuery UI Accordion

We just saw how to save whitespace by using the heightStyle property to enable the panel to be only as tall as its content.

Alternatively we can also extend the existing jQuery UI Accordion widget and provide a consistent way for users to enable/disable resize functionality. We will extend the jQuery UI Accordion to provide users with the option to drag and resize the content panel.

Understanding the jQuery UI Widget Factory

The jQuery UI Widget Factory is simply a function or factory method ($.widget) on which all of jQuery UI's widgets are built. It takes the widget name and an object containing widget properties as arguments and creates a jQuery plugin - that provides a consistent API to create and destroy widgets, encapsulate its functionality, allow setting options on initialization and provide state management. In simple words, it allows you to conform to a defined standard, making it easier for new users to start using your plugin.

Note: All jQuery UI's widgets use the same patterns as defined by the widget factory. If you learn how to use one widget, you'll know how to use all of them.

Creating a Widget Extension

You can create new widgets with the widget factory by passing the widget name and prototype to $.widget().

$.widget("custom.newAccordion", {});

This will create a newAccordion widget in the custom namespace.

However in our case, we want to extend the existing Accordion widget. To do so, pass the constructor of the jQuery UI Accordion widget ($.ui.accordion) to use as a parent, as shown here:

$.widget("custom.newAccordion", $.ui.accordion, {});

By doing so, we are indicating that the newAccordion widget should use jQuery UI's Accordion widget as a parent. In order to make our new widget useful, we will add some methods to its prototype object, which is the final parameter passed to $.widget(). The shell of our widget will look similar to the following:

(function ($) {
    $.widget("custom.newAccordion", $.ui.accordion, {
        options: {           
        },
        _create: function () {
        },
        destroy: function () {
        },
        disable: function () {
        },
        enable: function () {
        },
    });
})(jQuery);

Note: If you observe, the jQuery UI plugin has been encapsulated in a self-executing anonymous function (function ($) {}). This aliases $ and ensures that jQuery's noConflict() method works as intended.

Let’s add some functionality to our widget. Observe the following code:

(function( $ ) {
$.widget( "custom.newAccordion", $.ui.accordion, {
    options: {
        resizable: true
    },
    _create: function () {
        this._super();
        if ( !this.options.resizable ) {
            return;
        }
        this.headers.next().resizable({ handles: "s" })
        .css({
            "margin-bottom": "5px",
            "border-bottom":"1px dashed",
            "overflow": "hidden"
        });
    },
    _destroy: function () {
        this._super();
        if (!this.options.resizable) {
            return;
        }
        this.headers.next()
        .resizable("destroy")
        .css({
            "margin-bottom": "2px",
            "border-bottom": "1px solid",
            "overflow": ""
        });
    },
});
})(jQuery);

We start by providing flexible configuration through options and initialize them with default values. In this case, we are setting resizable to true by default. The _create() method is the widget’s constructor. In this method, we are replacing the original _create() method with our new implementation. this_super() ensures that the default setup actions of the accordion widget happens.

Note: Widget properties which begin with an underscore such as _create, are considered private.

The next step is to find all content sections of the accordion and apply the resizable() widget.

this.headers.next().resizable({ handles: "s" })

The “s” handle redirects the resizable widget to only show a south handle which means the user can use the cursor at the bottom of each Accordion section to resize it up or down.

We are also using some CSS to set the margin-bottom and border-bottom and overflow properties. Instead of adding CSS properties manually, you can even use a class like this

this.headers.next().resizable({ handles: "s" }).addClass( "mycss" );

The destroy() method removes the widget functionality and returns the element back to its pre-init state.

The final step is to call our newAccordion widget on the faq div and passing resizable to true

$(function () {
    $("#faq").newAccordion(     
        { resizable: true }
    );
});

Run the example and you will see the following Accordion with a dashed bottom border, 5px spacing and a resizable panel:

You can resize the panel by placing the cursor at the bottom of each section and dragging it up and down to suit your needs:

Further Reading: http://api.jqueryui.com/jQuery.widget

Download the entire source code of this article (Github)

This article has been editorially reviewed by Suprotim Agarwal.

C# and .NET have been around for a very long time, but their constant growth means there’s always more to learn.

We at DotNetCurry are very excited to announce The Absolutely Awesome Book on C# and .NET. This is a 500 pages concise technical eBook available in PDF, ePub (iPad), and Mobi (Kindle).

Organized around concepts, this Book aims to provide a concise, yet solid foundation in C# and .NET, covering C# 6.0, C# 7.0 and .NET Core, with chapters on the latest .NET Core 3.0, .NET Standard and C# 8.0 (final release) too. Use these concepts to deepen your existing knowledge of C# and .NET, to have a solid grasp of the latest in C# and .NET OR to crack your next .NET Interview.

Click here to Explore the Table of Contents or Download Sample Chapters!

Author

Suprotim Agarwal, MCSD, MCAD, MCDBA, MCSE, is the founder of DotNetCurry, DNC Magazine for Developers, SQLServerCurry and DevCurry. He has also authored a couple of books 51 Recipes using jQuery with ASP.NET Controls and The Absolutely Awesome jQuery CookBook.

Suprotim has received the prestigious Microsoft MVP award for Sixteen consecutive years. In a professional capacity, he is the CEO of A2Z Knowledge Visuals Pvt Ltd, a digital group that offers Digital Marketing and Branding services to businesses, both in a start-up and enterprise environment.

Get in touch with him on Twitter @suprotimagarwal or at LinkedIn