Accordion is a jQuery widget that is used for better organizing the content in a page.Using Accordion we can place different content in different regions.Also we can make the different regions expandable and collapsible and also define properties for those regions.Regions are similar to tabs.
Following figure illustrates accordion in a web page.It consists of two sections “Top Section” and “Bottom Section”.The first section is expanded.
To implement accordion widget in a web page follow the below steps:
1.To make an HTML element as accordion we call the accordion() method on the HTML element.
Here we define a div and set its id as “main”.We will use this id to refer to this element in jquery
<div id="main"> </div>
2. Declare the nested div elements in which we want to include the contents of our web page.
<div id="main"> <h3>Top Section</h3> <div> <p> Hello...This is content for Top Section </p> </div> <h3>Bottom Section </h3> <div> <p> Hello...This is content for Bottom Section </p> </div> </div>
We have declared the <h3> elements in line number 3 and 11 above.These are used to set the section headers.
3.To make this div as accordion we call the accordion() method on the div element as:
$(“#main”).accordion();
4. To control the behavior of the menu or content ,accordion() method accepts a javascript options object .Options object consists of name value pairs.
$("#main").accordion({"property":"value"});
Some of the useful option values are:
active Boolean value that indicates which panel is expanded by default.So if this value is set to 1 then second panel will be open by default.The first panel’s index is 0.
$( "#main" ).accordion({active: 1 });
To collapse all the panels set this value to false.
$( "#main" ).accordion({active: false });
collapsible Boolean value which indicates if all the panels can be collapsed.If this value is set to false then at least one panel will be expanded at all the times.
disabled Boolean value which indicates if the panel is disabled or not.
$( "#main" ).accordion({disabled: false });
heightStyle Used to set the heights of the accordion and the panels.Possible values are:
auto: The height of the tallest panel is used as the height of all the panels.
fill: All the available height is used by the panel
content: This is useful property if we want to set the height of the panel to show the content but not more than that.
Leave a Reply