Introduction
This chapter demonstrates about the jQuery UI Accordian Methods and Events which are used to control the Accordions and trigger the events and following are the concepts are covered in this chapter.
- Accordion Method
- Accordion Events
Description
jQuery UI Accordion provides a variety of methods. Most of the methods are same as those for an alternative method, except for method resize and activate. The method resize is employed to resize the elements on the document, the strategy activate is employed to activate specified accordion headers.
Adding or Removing Pannels
jQuery UI allows user to destroy the accordian panel User can also create an accordion. The code below demonstrates the creating a new variable and assign is the div accordion and which can be refreshed by using refresh method is as shown below.
[html]
<!DOCTYPE html>
<html>
<head>
<title>jQuery UI Accordion : Adding New Accordion</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.3/themes/hot-sneaks/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-2.1.3.js"></script>
<script src="http://code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
<script>
$(document).ready(function() {
var $demoAccordion = $("#demoAccordion");
$demoAccordion.accordion();
$('#createAccordion').click( function() {
var newAccordion = "<h2><a ref='#'>New Tutorial</a></h2><div>Details</div>";
$demoAccordion.append(newAccordion).accordion("refresh");
});
});
</script>
</head>
<body>
<div id="demoAccordion">
<h2><a href="#">jQuery</a></h2>
<img src="jquery.png"/>
<h2><a href="#">jquery_mobile</a></h2>
<img src="jquery_mobile.png"/>
<h2><a href="#">jquery_UI</a></h2>
<img src="jquery_UI.png"/>
</div>
<br>
<p>
<button type="button" id="createAccordion">Add/Create Accordion</button>
</p>
</body>
</html>
[/html]
Result
By running the above code in a preferred browser user can get the following output as shown in below image.
Creating Multiple Accordions
In some situations user needs to develop multiple accordions in a single page which is not a big issue user can arrange them in a proper way. The code below demonstrates to creating Multiple accordions on a single page.
[html]
<!DOCTYPE html>
<html>
<head>
<title>jQuery UI Accordion : Adding Multiple Accordion</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.3/themes/hot-sneaks/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-2.1.3.js"></script>
<script src="http://code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
<script>
$(document).ready(function() {
$(".demoAccordion").accordion();
$( ".two" ).accordion( "option", "icons",
{ "header": "ui-icon-plus",
"activeHeader": "ui-icon-minus" } );
});
</script>
</head>
<body>
<div class="demoAccordion">
<h2><a href="#">jQuery</a></h2>
<img src="jquery.png"/>
<h2><a href="#">jquery_mobile</a></h2>
<img src="jquery_mobile.png"/>
<h2><a href="#">jquery_UI</a></h2>
<img src="jquery_UI.png"/>
</div>
<br>
<div class="demoAccordion two">
<h2><a href="#">jQuery</a></h2>
<img src="jQuery.png"/>
<h2><a href="#">jquery_mobile</a></h2>
<img src="jquery_mobile.png"/>
<h2><a href="#">jquery_UI</a></h2>
<img src="jquery_UI.png"/>
</div>
</body>
</html>
[/html]
Result
By running the above code in a preferred browser user can get the following output as shown in below image.
Removing the Accordion
A user can remove the Accordion for which user need to remove the markup of header and panel both and user can also remove them separately. The code below demonstrates the removing the Accordion by specifying the index no of the panel as shown.
[html]
<!DOCTYPE html>
<html>
<head>
<title>jQuery UI Accordion : Removing Panel</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.3/themes/hot-sneaks/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-2.1.3.js"></script>
<script src="http://code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
<script>
$(document).ready(function() {
function removePanel(indexNo) {
$("#demoAccordion").find("h2").eq(indexNo).remove();
$("#demoAccordion").find("div").eq(indexNo).remove();
$("#demoAccordion").accordion("refresh");
}
$("#demoAccordion").accordion();
$("#removePanel").click(function(event, ui) {
var indexNo = $("#indexNo").val();
removePanel(indexNo);
});
});
</script>
</head>
<body>
<div id="demoAccordion">
<h2><a href="#">jQuery</a></h2>
<img src="jQuery.png"/>
<h2><a href="#">jquery_mobile</a></h2>
<img src="jquery_mobile.png"/>
<h2><a href="#">jquery_UI</a></h2>
<img src="jquery_UI.png"/>
</div>
<br>
<p>
<label>Index No of the Panel to be Removed(0 based):</label>
<input for="indexNo" id="indexNo">
<button type="button" id="removePanel">Remove!</button>
</p>
</body>
</html>
[/html]
Result
By running the above code in a preferred browser user can get the following output as shown in below image.
| Methods | Description |
|---|---|
| distroy | Which is used to remove the accordian functionality from input element. |
| enable | Which is used to enable the accordian. |
| disable | Which is used to disable the accordian. |
| option | Which is used to set one or more options. |
| resize | Which is used to resize the accordian when fill space setting is used and the parent element size gets changed. |
| activate index | Which is used to open specified content element. |
Description
jQuery UI Accordion events have 3 custom events, these are the methods of activating, beforeActivate and make. The event activate is triggered anytime a header is activated, the event is discharged once the animation is finished acting. The event beforeActivate event is discharged once an accordion header is chosen before the animation begins. The event produced is discharged once the accordion widget is initialized. The table below demonstrates the Accordion Events as shown.
Change Event
jQuery UI Accordian activates event come into action if the accordion header is activated and done with the related animation. the code below demonstrates the activate method to control accordion as shown.
[html]
<!DOCTYPE html>
<html>
<head>
<title>jQuery UI Accordion : Using the Change Event</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.3/themes/hot-sneaks/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-2.1.3.js"></script>
<script src="http://code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
<script>
$(document).ready(function() {
var currentStatus;
$("#demoAccordion").accordion({
activate: function(e, ui) {
$(".notify").remove();
currentStatus = $("<div />", {
"class": "notify",
text: [
ui.newHeader.find("a").text(), "header was activated,",
ui.oldHeader.find("a").text(), "header was closed"
].join(" ")
});
currentStatus.insertAfter("#demoAccordion").fadeOut(3000, function(){
$(this).remove();
});
}
});
});
</script>
</head>
<body>
<div id="demoAccordion">
<h2><a href="#">jQuery</a></h2>
<img src="jQuery.png"/>
<h2><a href="#">jquery_mobile</a></h2>
<img src="jquery_mobile.png"/>
<h2><a href="#">jquery_UI</a></h2>
<img src="jquery_UI.png"/>
</div>
</body>
</html>
[/html]
Result
By running the above code in a preferred browser user can get the following output as shown in below image.
beforeActivate
The jQuery UI beforeActivate event is used to activate the specified accordion header and which is also fired if the animated transition begins to perform is as shown in below code.
[html]
<!DOCTYPE html>
<html>
<head>
<title>jQuery UI Accordion : Using the beforeActivate Event</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.3/themes/hot-sneaks/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-2.1.3.js"></script>
<script src="http://code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
<script>
$(document).ready(function() {
var currentStatus;
$("#demoAccordion").accordion({
beforeActivate: function(e, ui) {
currentStatus = $("<div />", {
"class": "notify",
text: [ui.newHeader.find("a").text(),
"-- header was activated, ", ui.oldHeader.find("a" ). text(),
"-- header was closed"].join(" ")
});
currentStatus.insertAfter("#demoAccordion")
.fadeOut(2000, function() {
$(this).remove();
});
}
});
});
</script>
</head>
<body>
<div id="demoAccordion">
<h2><a href="#">jQuery</a></h2>
<img src="jQuery.png"/>
<h2><a href="#">jquery_mobile</a></h2>
<img src="jquery_mobile.png"/>
<h2><a href="#">jquery_UI</a></h2>
<img src="jquery_UI.png"/>
</div>
</body>
</html>
[/html]
Result
By running the above code in a preferred browser user can get the following output as shown in below image.
| Events | Description |
|---|---|
| activate | Which is fired when an accordion header is activated and done with the animation performing. |
| beforeActivate | Which is fired when an accordion header is activated and animation yet to be begin. |
| create | Which is triggered before the active content is change. |
Key Points
- beforeActivate is to trigger action before the transition of the animation begins.
- Inorder to add new accordions user need to click on Create Accordion button.
- A user can add several number of accordion,by just take care to call them accurately.
- Index number starts from 0 to n-1 which is zero based,.