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.