JQuery

JQuery UI - Day 6 (Accordion)

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.

  1. <divid="accord">  
  2.     <h3>First header</h3>  
  3.     <div>First container</div>  
  4.     <h3>Second header</h3>  
  5.     <div>Second container</div>  
  6.     <h3>Third header</h3>  
  7.     <div>Third container</div>  
  8. </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

  1. <htmlxmlns="http://www.w3.org/1999/xhtml">  
  2.     <headrunat="server">  
  3.         <title></title>  
  4.         <scriptsrc="jquery-ui-1.11.4.custom/jquery-ui-1.11.4.custom/external/jquery/jquery.js">  
  5.             </script>  
  6.             <linkhref="jquery-ui-1.11.4.custom/jquery-ui-1.11.4.custom/jquery-ui.css" rel="stylesheet" />  
  7.             <scriptsrc="jquery-ui-1.11.4.custom/jquery-ui-1.11.4.custom/jquery-ui.js">  
  8.                 </script>  
  9.                 <linkhref="jquery-ui-1.11.4.custom/jquery-ui-1.11.4.custom/jquery-ui.structure.css" rel="stylesheet" />  
  10.                 <linkhref="jquery-ui-1.11.4.custom/jquery-ui-1.11.4.custom/jquery-ui.theme.css" rel="stylesheet" /> </head>  
  11.                 <script>  
  12.                 $(document).ready(function ()  
  13.                 {  
  14.                     $("#accordion-2").accordion(  
  15.                     {  
  16.                         collapsible: true  
  17.                     });  
  18.                 });  
  19.                 </script>  
  20.                 <style>  
  21.                 #accordion-2 {  
  22.                     font-size: 14px;  
  23.                     width: 1000px;  
  24.                     margin-left: 150px  
  25.                 }  
  26.                 </style>  
  27.                 <style>  
  28.             #div1 {  
  29.                     background-color: coral;  
  30.                     color: ButtonHighlight;  
  31.                     font-size: 30px;  
  32.                     height: 50px;  
  33.                     width: 1000px;  
  34.                     text-align: center;  
  35.                     margin-left: 150px  
  36.                 }  
  37.             }  
  38.                 </style>  
  39.   
  40.                 <body>  
  41.                     <divid="div1"> <span>************Accordion*************</span> </div>  
  42.                         <divid="accordion-2">  
  43.                             <h3>Delhi</h3>  
  44.                             <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>  
  45.                             <h3>Mumbai</h3>  
  46.                             <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>  
  47.                             <h3>Jaipur</h3>  
  48.                             <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>  
  49.                             <h3>Amritsar</h3>  
  50.                             <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>  
  51.                         </div>  
  52.                 </body>  
  53.   
  54.             </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

  1. <!DOCTYPEhtml>  
  2. <headrunat="server">  
  3.     <title></title>  
  4.     <scriptsrc="jquery-ui-1.11.4.custom/jquery-ui-1.11.4.custom/external/jquery/jquery.js">  
  5.         </script>  
  6.         <linkhref="jquery-ui-1.11.4.custom/jquery-ui-1.11.4.custom/jquery-ui.css" rel="stylesheet" />  
  7.         <scriptsrc="jquery-ui-1.11.4.custom/jquery-ui-1.11.4.custom/jquery-ui.js">  
  8.             </script>  
  9.             <linkhref="jquery-ui-1.11.4.custom/jquery-ui-1.11.4.custom/jquery-ui.structure.css" rel="stylesheet" />  
  10.             <linkhref="jquery-ui-1.11.4.custom/jquery-ui-1.11.4.custom/jquery-ui.theme.css" rel="stylesheet" />  
  11.             <script>  
  12.             $(document).ready(function ()  
  13.             {  
  14.                 $("#accordion-1").accordion(  
  15.                 {  
  16.                     active: 1,  
  17.                     icons:  
  18.                     {  
  19.                         "header": "ui-icon-plus",  
  20.                         "activeHeader": "ui-icon-minus"  
  21.                     },  
  22.                     event: "mouseover",  
  23.                     collapsible: true  
  24.                 });  
  25.             });  
  26.             </script>  
  27.             <style>  
  28.             #accordion-1 {  
  29.                 font-size: 14px;  
  30.                 width: 1000px;  
  31.                 margin-left: 150px  
  32.             }  
  33.               
  34.             #div1 {  
  35.                 background-color: coral;  
  36.                 color: ButtonHighlight;  
  37.                 font-size: 30px;  
  38.                 height: 50px;  
  39.                 width: 1000px;  
  40.                 text-align: center;  
  41.                 margin-left: 150px  
  42.             }  
  43.             </style>  
  44.             </head>  
  45.   
  46.             <body>  
  47.                 <divid="div1"> <span>************Accordion*************</span> </div>  
  48.                     <divid="accordion-1">  
  49.                         <h3>Delhi</h3>  
  50.                         <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>  
  51.                         <h3>Mumbai</h3>  
  52.                         <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>  
  53.                         <h3>Jaipur</h3>  
  54.                         <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>  
  55.                         <h3>Amritsar</h3>  
  56.                         <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>  
  57.                     </div>  
  58.             </body>  
  59.   
  60.         </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
  1. <!DOCTYPEhtml>  
  2. <headrunat="server">  
  3.     <title></title>  
  4.     <scriptsrc="jquery-ui-1.11.4.custom/jquery-ui-1.11.4.custom/external/jquery/jquery.js">  
  5.         </script>  
  6.         <linkhref="jquery-ui-1.11.4.custom/jquery-ui-1.11.4.custom/jquery-ui.css" rel="stylesheet" />  
  7.         <scriptsrc="jquery-ui-1.11.4.custom/jquery-ui-1.11.4.custom/jquery-ui.js">  
  8.             </script>  
  9.             <linkhref="jquery-ui-1.11.4.custom/jquery-ui-1.11.4.custom/jquery-ui.structure.css" rel="stylesheet" />  
  10.             <linkhref="jquery-ui-1.11.4.custom/jquery-ui-1.11.4.custom/jquery-ui.theme.css" rel="stylesheet" />  
  11.             <script>  
  12.             $(document).ready(function ()  
  13.             {  
  14.                 $("#accordion-4").accordion(  
  15.                 {  
  16.                     active: 1,  
  17.                     icons:  
  18.                     {  
  19.                         "header": "ui-icon-plus",  
  20.                         "activeHeader": "ui-icon-minus"  
  21.                     },  
  22.                     event: "mouseover",  
  23.                     collapsible: true  
  24.                 });  
  25.                 $("#accordion-3").accordion();  
  26.             });  
  27.             </script>  
  28.             <style>  
  29.             #accordion-4 {  
  30.                 font-size: 14px;  
  31.                 width: 1000px;  
  32.                 margin-left: 150px  
  33.             }  
  34.              
  35.             #div3,  
  36.             #div2 {  
  37.                 height: 100px;  
  38.                 color: Highlight;  
  39.             }  
  40.              
  41.             #div1 {  
  42.                 background-color: coral;  
  43.                 color: ButtonHighlight;  
  44.                 font-size: 30px;  
  45.                 height: 50px;  
  46.                 width: 1000px;  
  47.                 text-align: center;  
  48.                 margin-left: 150px  
  49.             }  
  50.             </style>  
  51.             </head>  
  52.   
  53.             <body>  
  54.                 <divid="div1"> <span>************Accordion*************</span> </div>  
  55.                     <divid="accordion-4">  
  56.                         <h3>Haryana</h3>  
  57.                         <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>  
  58.                         <h3>Punjab</h3>  
  59.                         <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>  
  60.                         <h3>Rajasthan</h3>  
  61.                         <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.  
  62.                             <h2>Alwar</h2>  
  63.                             <divid="div3">Alwar is a city and administrative headquarters of Alwar District Alwar is part of National Capital Region. </div>  
  64.                             <h2>Ajmer</h2>  
  65.                             <divid="div2">Ajmer is the fifth largest city in the Indian state of Rajasthan and is the centre of the eponymous Ajmer District. </div>  
  66.                         </div>  
  67.                         <h3>Gujarat</h3>  
  68.                         <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>  
  69.                         </div>  
  70.             </body>  
  71.   
  72.     </html>  
Output

run

In the above example we are using nested accordion.

 

Up Next
    Ebook Download
    View all
    Learn
    View all
    Get Started

    You need to be a premium member to use this feature. To access it, you'll have to upgrade your membership.

    Become a sharper developer and jumpstart your career.

    Basic

    $0

    $

    . 00

    monthly

    For Basic members:

    • Standard Profile
    • Access learning courses
    • Access free e-books
    • 1x point
    Premium

    $20

    $

    . 00

    monthly

    For Premium members:

    • Earn 2x reward points
    • Premium profile with Verified check
    • Premium Avatar with status update
    • Learning courses
    • Unlimited Certifications and badges on profile
    • Unlimited Book downloads
    • Access to Premium content
    • Online Training
    • Unlimited PDF conversions and downloads
    • Professional Resume Writing
    • Interview Preparations Guide
    • 25 messages per month
    • 1 "Kodzu" avatar, basic
    Elite

    $45

    $

    . 00

    monthly

    For Elite members:

    • Bundle E-books
    • Access to all Learn Series
    • Unlimited Apply Jobs