How to create an accordion Panel using the jquery plugin _ jquery

What we want to do today is the accordion panel, jquery. there is an accordtion plug-in the ui. We want to achieve the same effect. First, we should create an html file, which contains the following html structure.

The Code is as follows:

　　

First pane
　　　　

This script shoshould allow only one pane to be visible at a time.

　　

　　

Second pane
　　　　

This script shoshould allow only one pane to be visible at a time.

　　

　　

Third pane
　　　　

This script shoshould allow only one pane to be visible at a time.

　　

　　

The following css is defined for the page:

The Code is as follows:

　　

Next we will introduce the implementation of the jquery. accordtion. js plug-in. First, we need to consider how to hide the content section in pane, that is, the p tag. You do not need to hide h1 as the title.

The Code is as follows:

(Function ($ ){
$. Fn. accordtion = function (){
Return this. each (function (){
$ (This). find ('P'). hide ();
});
}
}) (JQuery );

Page call code:

The Code is as follows:

$ (Document). ready (function (){
$ ('# Pane-iner'). accordtion ();
});

The plug-in code is very simple, that is, find the p under the p class pane and hide it. What we need to achieve next is that when the user points to h1, the corresponding p TAG content is displayed, and the content of the p tag corresponding to other h1 is hidden. The Code is as follows:

The Code is as follows:

// Set the click event for the h1 tag
Self. delegate ('h1 ', 'click', function (){
// Set the slideToggle effect for the corresponding p tag
$ (This). next ('P'). slideToggle (600)
// Obtain other pane objects, find the p tag under them, and collapse
. Parent (). siblings (). children ('P'). slideUp (600 );
});

Now our plug-in is very stylish, and the last thing we need to do is to add the user-defined attributes options. This time, we only add the attribute 'display the first pane by default.

The Code is as follows:

// Set the display of the first element
Self. children (': eq (' + options. visibleByDefault + ') // locate the pane object consistent with options. visibleByDefault.
. Children ('P ')
. Show ();

For the complete code, let's take a look at the demo. JQuery. plugin. accordtion

Thank you for your support. I hope this article will help you. If you have any questions about the code, contact me.