" Live as if you were to die tomorrow. Learn as if you were to live forever.. "
- Mahatma Gandhi
" Live as if you were to die tomorrow. Learn as if you were to live forever.. "
- Mahatma Gandhi
jQuery provides us a rich set of UI controls to be used in our sites like (Datepicker, Tabs, Accordion etc.). Accordion allow us to accommodate more than one panels in one control . Each panel may have different data to display, but at a time we can show only one panel . At one time our concern was to flip the Accordion panel using external button say “Next” and “Prev” buttons.
Solution :
Change the active panel programmatically is a simple work to do . We have to simply activate the panel by :
wizard.accordion(“activate”, index);
In the demo application I have taken 4 panel Accordion and two buttons “Previous” and “Next” to change the Accordion page.
In the same way we can also take “First” and “Last” buttons , Particular Panel dropdown etc.
Copy paste the following code in a file and save it with .html extension . Run in browser (Allow block content for IE) :
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Demo Accordion</title>
<style type="text/css" > #accordion{padding:5px;width:50%;} </style>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.2/themes/start/jquery-ui.css" type="text/css" media="all" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.2/jquery-ui.js" type="text/javascript"></script>
<script type="text/javascript" >
var gCurrentIndex = 0; // global variable to keep the current index;
var ACCORDION_PANEL_COUNT = 3; //global variable for panel count. Here 3 is for zero based accordion index
$(document).ready(function () {
wizard = $("#accordion").accordion({
event: 'click',
active: 0,
autoheight: true,
animated: "bounceslide",
icons: { 'header': 'ui-icon-plus', 'headerSelected': 'ui-icon-minus' },
change: function (event, ui) { gCurrentIndex = $(this).find("h4").index(ui.newHeader[0]); }
});
//Bind event for previous and next buttons
$('.previous,.next').click(function () {
var index = 0;
if ($(this).hasClass('next')) {
index = gCurrentIndex + 1;
if (index > ACCORDION_PANEL_COUNT ) {
index = ACCORDION_PANEL_COUNT;
}
}
else {
index = gCurrentIndex - 1;
if (index < 0) {
index = 0;
}
}
//Call accordion method to set the active panel
wizard.accordion("activate", index);
});
});
</script>
</head>
<body>
<div id="accordion" style="padding:5px;">
<h4><a href="#">Tab1 1</a></h4>
<div>panel 1</div>
<h4><a href="#">Tab 2</a></h4>
<div>panel 2</div>
<h4><a href="#">Tab 3</a></h4>
<div>panel 3</div>
<h4><a href="#">Tab 4</a></h4>
<div>panel 4</div>
</div>
<input class="previous" type="button" value="Previous" />
<input class="next" type="button" value="Next" />
</body>
</html>
Conclusion :
When we have a need of wizard type of solution in our project like Registration process, Account creation etc , try using accordion with custom navigation buttons (like above). We can get the same functionalities of wizard control and without postback !