jquery plug-in production Accordion Panel effect implementation_jquery

First we create an html file, which contains the following html structure.

Copy code The code is as follows:

　

　　

first pane

　　

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

　

　

second pane

　　

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

　

　

　;p>this script should allow only one pane to be visible at a time.

　

Define the following css:

Copy code

The code is as follows: 　


Now we will introduce the implementation of jquery.accordtion.js plug-in. The first thing we need to consider is how to hide the content part of the pane, which is the p tag. h1 as a title does not need to be hidden.

Copy code

The code is as follows: (function ($) { $.fn .accordtion = function () {

return this.each(function () {

$(this).find('p').hide();
});
}
})(jQuery);　


Code called by the page:

Copy code

The code is as follows: $(document).ready(function () { 　$('#pane-container').accordtion();

});

The plug-in code is very simple, just find the p under the div with class pane and hide it. What we want to achieve next is that when the user clicks on h1, the content of the corresponding p tag is displayed, while the content of other p tags corresponding to h1 is hidden. The code is as follows:

Copy code

The code is as follows: //Set the click event on the h1 tagself.delegate('h1', 'click', function () {

//Set the slideToggle effect for the corresponding p tag

$(this).next('p').slideToggle(600)
　　　　//Get other pane objects, find the p tags below them, and close them
　　.parent().siblings().children('p').slideUp(600);
});


Now that our plug-in is very stylish, the last thing to do is to add user-defined attribute options. This time we only add an attribute of 'which pane is displayed by default'.

Copy code

The code is as follows: //Set which element to display self .children(':eq(' options.visibleByDefault ')')//Find the pane object that is consistent with options.visibleByDefault

　.children('p')

　.show();


You should download the demo to see the complete code for yourself.
jQuery.plugin.accordtion

Thank you for your support. I hope this article will be helpful to you. If there is anything unclear about the code, you can contact me.