We write an accordion plugin in 618 bytes

Very often one has to see variants of the accordion control on various sites. In this article I would like to offer my own version, which, in addition to having some original properties, also weighs only 618 bytes in a minified form. At the same time, I will show you how to quickly write the simplest jQuery plugin.

Looking ahead to say that the plugin was tested in Firefox 3.0.3, Internet Explorer 7 and 8b2, Opera 9.52 and Chrome 0.3.154.9. In all other browsers, performance is guaranteed as far as jQuery works in them.

For the curious, I will give an example of what will happen in the end (the links and buttons in the example do not work).

Formulation of the problem

Create a plugin for jQuery, minimal in size, which would build an accordion control element on the basis of the html element “dl”. An obligatory condition is the conclusion of the explanation for the inactive elements of the "accordion". The active element of the accordion is determined by the presence of the class “active” in the corresponding element dt. The dt also contains the title of the “accordion” element. The span element must have the class “remark” and is in dd. The main body of each “accordion” element must be contained in a div, which must also be in dd.
')

Decision

To begin with, we define a function that updates the state of the dl element and brings it to the required form:

function Update(dl) {
$( "#" + dl.id + " > dt:not(.active)" ).each( function () {
$( this ).css( "cursor" , "pointer" );
});
$( "#" + dl.id + " > dt.active" ).each( function () {
$( this ).css( "cursor" , "" );
});

$( "#" + dl.id + " > dd > div" ).hide();
$( "#" + dl.id + " > dd > span.remark" ).show();

$( "#" + dl.id + " > dt.active" ).next().children( "div" ).show(300);
$( "#" + dl.id + " > dt.active" ).next().children( "span.remark" ).hide();
}

* This source code was highlighted with Source Code Highlighter .

The first two operations update the mouse pointer when you hover over the active and inactive elements of the "accordion". The second two operations hide the entire contents of the "accordion" and show all the notes. The third two operations show with slowing down the contents of the active tab of the "accordion" and hide its note.

Next, we will write a functional that will be executed when clicking on the tabs of the "accordion":

$( "#" + this .id + " > dt" ).click( function () {
if ($( this ).hasClass( "active" ))
return ; // dt

$( "#" + dl.id + " > dt" ).removeClass( "active" );
$( this ).addClass( "active" );

Update(dl);
});

* This source code was highlighted with Source Code Highlighter .

This is a “torn out” piece of code. Here, $ ("#" + this.id + "> dt") is a selection of all the tabs of our "accordion". By means of jQuery, a click handler is installed on the tab, where at the very beginning there is a check where they clicked, if on the passive element, the output is made. Further, all tabs remove the class “acitve”, in the clicked one, on the contrary, is assigned.

Let's put it all together and write a jQuery plugin:

jQuery.fn.accordion = function () {

function Update(dl) {
$( "#" + dl.id + " > dt:not(.active)" ).each( function () {
$( this ).css( "cursor" , "pointer" );
});
$( "#" + dl.id + " > dt.active" ).each( function () {
$( this ).css( "cursor" , "" );
});

$( "#" + dl.id + " > dd > div" ).hide();
$( "#" + dl.id + " > dd > span.remark" ).show();

$( "#" + dl.id + " > dt.active" ).next().children( "div" ).show(300);
$( "#" + dl.id + " > dt.active" ).next().children( "span.remark" ).hide();
}

return this .each( function () {
var dl = $( this )[0];

Update(dl);

$( "#" + this .id + " > dt" ).click( function () {
if ($( this ).hasClass( "active" ))
return ; // dt

$( "#" + dl.id + " > dt" ).removeClass( "active" );
$( this ).addClass( "active" );

Update(dl);
});

});

};

* This source code was highlighted with Source Code Highlighter .

We extend jQuery with our “accordion” function, in which for each given element the following steps are performed: an instance of dl is obtained, the state of the received dl is updated, mouse click handlers are set for all dt of the resulting dl.

Using

Using the written element is extremely simple. To do this, simply include in the code the following block, which will make our “accordion” out of the transmitted dl element:

< script type ="text/javascript" >
$( document ).ready
(
function () {
$( "#LoginList" ).accordion();
}
);
</ script >

* This source code was highlighted with Source Code Highlighter .

Conclusion

The presented variant is the simplest one; it does not pretend to anything but an example. It can be improved by adding parameters that would affect the display speed of the active element on the starting number of the “accordion” tab. In addition, I am confident that you can improve the javascript code itself.

I hope that this example and the control will be useful to someone or suggest interesting ideas.

Link to plugin (1192 bytes), minified version (618 bytes).

UPD: thanks to optimization DmitryBaranovskiy, the size of the minified version is reduced to 508 bytes, the full version to 909 bytes