JQuery UI - Day 6 (Accordion)

Article

Before reading this article, I highly recommend reading my previous parts:

Accordion is a jQueryUI widget that contain pair of headers and content panels into an accordion. Accordion Widget is a jQuery based expandable and collapsible content holder that is broken into sections and probably looks like tabs. The markup of accordion container needs pairs of headers and content panels as in the following example.

<divid="accord">
<h3>First header</h3>
<div>First container</div>
<h3>Second header</h3>
<div>Second container</div>
<h3>Third header</h3>
<div>Third container</div>
</div>

Syntax:

$(selector,context).accordion(options)

or

$(selector,context).accordion("action",params)

Keyboard Interaction:

When focus is on a header of accordion then the following key commands are available:

Intersection	Description
CTRL+UP	Move focus to associated header.
UP/LEFT	Move focus to the previous header. If on first header, moves focus to last header
DOWN/RIGHT	Move focus to the next header. If on last header, moves focus to first header.
HOME	Move focus to the first header.
END	Move focus to the last header.

Example

<htmlxmlns="http://www.w3.org/1999/xhtml">
<headrunat="server">
<title></title>
<scriptsrc="jquery-ui-1.11.4.custom/jquery-ui-1.11.4.custom/external/jquery/jquery.js">
</script>
<linkhref="jquery-ui-1.11.4.custom/jquery-ui-1.11.4.custom/jquery-ui.css" rel="stylesheet" />
<scriptsrc="jquery-ui-1.11.4.custom/jquery-ui-1.11.4.custom/jquery-ui.js">
</script>
<linkhref="jquery-ui-1.11.4.custom/jquery-ui-1.11.4.custom/jquery-ui.structure.css" rel="stylesheet" />
<linkhref="jquery-ui-1.11.4.custom/jquery-ui-1.11.4.custom/jquery-ui.theme.css" rel="stylesheet" /> </head>
<script>
$(document).ready(function ()
{
$("#accordion-2").accordion(
{
collapsible: true
});
});
</script>
<style>
#accordion-2 {
font-size: 14px;
width: 1000px;
margin-left: 150px
}
</style>
<style>
#div1 {
background-color: coral;
color: ButtonHighlight;
font-size: 30px;
height: 50px;
width: 1000px;
text-align: center;
margin-left: 150px
}
}
</style>
<body>
<divid="div1"> <span>************Accordion*************</span> </div>
<divid="accordion-2">
<h3>Delhi</h3>
<div>Delhi, India’s capital territory, is a massive metropolitan area in the country’s north. In Old Delhi, a neighborhood dating to the 1600s, stands the imposing Mughal-era Red Fort, a symbol of India, and the sprawling Jama Masjid mosque, whose courtyard accommodates 25,000. Nearby is ChandniChowk, a vibrant bazaar filled with food carts, sweets shops and spice stalls.</div>
<h3>Mumbai</h3>
<div>Mumbai City District is a district of Maharashtra in Konkan Division. As a city district, it has no headquarters or subdivisions. It, along with the Mumbai Suburban District, makes up the metropolis of Mumbai.</div>
<h3>Jaipur</h3>
<div>aipur, the capital of India’s Rajasthan state, evokes the royal family that once ruled the region and that, in 1727, founded what is now called the Old City, or “Pink City” for its trademark building color. At the center of its stately street grid (notable in India) stands the opulent, collonaded City Palace complex, today houses several museum collections of textiles and art.</div>
<h3>Amritsar</h3>
<div>Amritsar (also called Ambarsar) is a city in the northwestern Indian state of Punjab, not far from the border with Pakistan. At the center of its walled old town is the gilded Golden Temple (Harmandir Sahib), considered the holiest gurdwara, or religious complex, of the Sikh religion. It’s at the end of a causeway, surrounded by the sacred AmritSarovar lake, where pilgrims bathe.</div>
</div>
</body>
</html>

Output

see Output

In the above example we created a simple accordion that is divided into 4 panels.

Options

Option	Description	Example
active	Which panel is currently open. Default value is 0. If active is set to false , all panel will be collapse.	$("#accordion-2").accordion({ active:2 });
animate	It define how to animate changing panels. Supports multiple types. Boolean: A value of false will disable animations. Number: This is a duration in milliseconds String: Name of easing to use with default duration. Object: Animation settings with easing and duration properties.	$("#accordion-2").accordion({ animate: 1000 });
collapsible	Define whether all the sections can be closed at once. Allows collapsing the active section. Default value is false.	$("#accordion-2").accordion({ collapsible: true });
disabled	This option when set to true disables the accordion. By default value is false.	$("#accordion-2").accordion({ disabled: true });
event	Define the event that accordion headers will react to in order to activate the associated panel. Multiple events can be specified separated by a space.	$("#accordion-2").accordion({ event: "mouseover" });
heightStyle	Controls the height of the accordion and each panel. Possible values. Following values are possiable auto: All panels will be set to the height of the tallest panel. fill: Expand to the available height based on the accordion's parent height. content: Each panel will be only as tall as its content.	$("#accordion-2").accordion({ heightStyle: "fill" });
icons	Defines the icons to use to the left of the header text for opened and closed panels.	$("#accordion-2").accordion({ icons: { "header": "ui-icon-plus", "activeHeader": "ui-icon-minus" } });

Methods

Method	Description	Example
destroy	Removes the accordion functionality completely. This will return the element back to its pre-init state.	$("#accordion-2").accordion(accordion( "destroy"));
disable	This method disables the accordion.	$("#accordion-2").accordion(accordion( "disable"));
enable	This method is used to enable the accordion.	$("#accordion-2").accordion(accordion( "enable"));
instance	Return accordion’s instance object.	$("#accordion-2").accordion(accordion("instance"));
option(option_name)	Gets the value currently associated with the option.	$("#accordion-2").accordion(accordion("option","event"));
option(option_name,value)	Set the value of option for accordion.	$("#accordion-2").accordion(accordion("option","event","click"));
option()	Return an object containing key/value pairs representing the current accordion	$("#accordion-2").accordion(accordion("option"));
refresh	This action processes any headers and panels that were added or removed directly in the DOM. It then re-computes the height of the accordion panels.	$("#accordion-2").accordion(accordion("referesh"));
widget	Return a jQuery object of accordion	varobj=$("#accordion-2").accordion(accordion("widget"));

Events

Event	Description	Example
activate(event,ui)	Triggered when a menu is activated. Since the activate event is only fired on panel activation, it is not fired for the initial panel when the accordion widget is created. The ui object can have the following values. newHeader: The new header that was just activated. oldHeadrer: The old header that was just deactivated. newPanel: The new panel that was just activated. oldPanel: The old panel that was just deactivated.	$("#accordion-2").accordion({ activate: function (event, ui) { } });
beforeActivate(event, ui)	This event is triggered before a panel is activated. This event can be canceled to prevent the panel from activating.The ui object can have the following values. newHeader: The new header that is about to be activated oldHeadrer: The old header that is about to be activated newPanel: The new panel that is about to be activated oldPanel: The old panel that is about to be activated	$("#accordion-2").beforeActivate({ activate: function (event, ui) { } });
create(event, ui)	This event is triggered when the accordion is created.. The ui object can have the following values. Header: Represent the activate header. Panel: represent the activate panel.	$("#accordion-2").accordion({ create: function (event, ui) { } });

Now we consider some examples.

Example 1

<!DOCTYPEhtml>
<headrunat="server">
<title></title>
<scriptsrc="jquery-ui-1.11.4.custom/jquery-ui-1.11.4.custom/external/jquery/jquery.js">
</script>
<linkhref="jquery-ui-1.11.4.custom/jquery-ui-1.11.4.custom/jquery-ui.css" rel="stylesheet" />
<scriptsrc="jquery-ui-1.11.4.custom/jquery-ui-1.11.4.custom/jquery-ui.js">
</script>
<linkhref="jquery-ui-1.11.4.custom/jquery-ui-1.11.4.custom/jquery-ui.structure.css" rel="stylesheet" />
<linkhref="jquery-ui-1.11.4.custom/jquery-ui-1.11.4.custom/jquery-ui.theme.css" rel="stylesheet" />
<script>
$(document).ready(function ()
{
$("#accordion-1").accordion(
{
active: 1,
icons:
{
"header": "ui-icon-plus",
"activeHeader": "ui-icon-minus"
},
event: "mouseover",
collapsible: true
});
});
</script>
<style>
#accordion-1 {
font-size: 14px;
width: 1000px;
margin-left: 150px
}
#div1 {
background-color: coral;
color: ButtonHighlight;
font-size: 30px;
height: 50px;
width: 1000px;
text-align: center;
margin-left: 150px
}
</style>
</head>
<body>
<divid="div1"> <span>************Accordion*************</span> </div>
<divid="accordion-1">
<h3>Delhi</h3>
<div>Delhi, India’s capital territory, is a massive metropolitan area in the country’s north. In Old Delhi, a neighborhood dating to the 1600s, stands the imposing Mughal-era Red Fort, a symbol of India, and the sprawling Jama Masjid mosque, whose courtyard accommodates 25,000. Nearby is ChandniChowk, a vibrant bazaar filled with food carts, sweets shops and spice stalls.</div>
<h3>Mumbai</h3>
<div>Mumbai City District is a district of Maharashtra in Konkan Division. As a city district, it has no headquarters or subdivisions. It, along with the Mumbai Suburban District, makes up the metropolis of Mumbai.</div>
<h3>Jaipur</h3>
<div>aipur, the capital of India’s Rajasthan state, evokes the royal family that once ruled the region and that, in 1727, founded what is now called the Old City, or “Pink City” for its trademark building color. At the center of its stately street grid (notable in India) stands the opulent, collonaded City Palace complex, today houses several museum collections of textiles and art.</div>
<h3>Amritsar</h3>
<div>Amritsar (also called Ambarsar) is a city in the northwestern Indian state of Punjab, not far from the border with Pakistan. At the center of its walled old town is the gilded Golden Temple (Harmandir Sahib), considered the holiest gurdwara, or religious complex, of the Sikh religion. It’s at the end of a causeway, surrounded by the sacred AmritSarovar lake, where pilgrims bathe.</div>
</div>
</body>
</html>

Output

Output

In the above example we defined the panel 1 (2nd) as activate panel. So, 2nd panel will open at the creating of accordion. We define plus sign for closed and minus opened panel. All panel will be active on mouseover event. We define the true for collapsible option that allows users to close a menu by clicking on header section.

Example 2

<!DOCTYPEhtml>
<headrunat="server">
<title></title>
<scriptsrc="jquery-ui-1.11.4.custom/jquery-ui-1.11.4.custom/external/jquery/jquery.js">
</script>
<linkhref="jquery-ui-1.11.4.custom/jquery-ui-1.11.4.custom/jquery-ui.css" rel="stylesheet" />
<scriptsrc="jquery-ui-1.11.4.custom/jquery-ui-1.11.4.custom/jquery-ui.js">
</script>
<linkhref="jquery-ui-1.11.4.custom/jquery-ui-1.11.4.custom/jquery-ui.structure.css" rel="stylesheet" />
<linkhref="jquery-ui-1.11.4.custom/jquery-ui-1.11.4.custom/jquery-ui.theme.css" rel="stylesheet" />
<script>
$(document).ready(function ()
{
$("#accordion-4").accordion(
{
active: 1,
icons:
{
"header": "ui-icon-plus",
"activeHeader": "ui-icon-minus"
},
event: "mouseover",
collapsible: true
});
$("#accordion-3").accordion();
});
</script>
<style>
#accordion-4 {
font-size: 14px;
width: 1000px;
margin-left: 150px
}
#div3,
#div2 {
height: 100px;
color: Highlight;
}
#div1 {
background-color: coral;
color: ButtonHighlight;
font-size: 30px;
height: 50px;
width: 1000px;
text-align: center;
margin-left: 150px
}
</style>
</head>
<body>
<divid="div1"> <span>************Accordion*************</span> </div>
<divid="accordion-4">
<h3>Haryana</h3>
<div>Haryana is a North Indian state surrounding New Delhi on 3 sides. The Yamuna River runs along its eastern border with Uttar Pradesh. Shared with Punjab, the state capital Chandigarh is known for its modernist buildings and gridlike street plan designed by Le Corbusier. Its ZakirHussain Rose Garden features 1,600 species, while its Rock Garden showcases sculptures made with recycled materials.</div>
<h3>Punjab</h3>
<div>Punjab, a state bordering Pakistan, is the heart of India’s Sikh community. Its city of Amritsar, founded in 1577 by Sikh guru Ram Das, is the site of Harmandir Sahib, the holiest gurdwara (Sikh temple). Pilgrims visit its gilded HariMandir sanctuary and bathe in the surrounding Pool of Nectar. Also in Amritsar is Durgiana Temple, a Hindu shrine with engraved silver doors.</div>
<h3>Rajasthan</h3>
<divid="accordion-3">Rajasthan is a northern Indian state bordering Pakistan. Its palaces and forts are reminders of the many kingdoms that historically vied for the region. In its capital, Jaipur, are the 18th-century City Palace and HawaMahal, a former cloister for royal women, fronted by a 5-story sandstone screen. Amer Fort, atop a nearby hill, was built by a Rajput prince in the 1600s.
<h2>Alwar</h2>
<divid="div3">Alwar is a city and administrative headquarters of Alwar District Alwar is part of National Capital Region. </div>
<h2>Ajmer</h2>
<divid="div2">Ajmer is the fifth largest city in the Indian state of Rajasthan and is the centre of the eponymous Ajmer District. </div>
</div>
<h3>Gujarat</h3>
<div>Gujarat, India's westernmost state, has varied terrain and numerous sacred sites. In its urban center of Ahmedabad is the Calico Museum of Textiles, displaying antique and modern Indian fabrics. Spiritual leader Mahatma Gandhi's base from 1917-1930 was Sabarmati Ashram, where his living quarters remain on view. The Jama Masjid (Friday Mosque), built in the 15th-century, is defined by its courtyard and columned design.</div>
</div>
</body>
</html>

Output

run

In the above example we are using nested accordion.

Up Next

Ebook Download

View all

Printing in C# Made Easy

Read by 10.8k people

Download Now!

Learn

View all