Objectives and outcomes

In this tutorial we are going to use accordion widget in jqueryUI which is used to display the data in the form of tabs. Example for the same is shown below:



Tab 1

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Tab 2

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do ei et dolore magna aliqua. Ut enim ad minim exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Tab 3

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.



HTML code:

<html>
<head>
<title>jQuery UI Accordion</title>
<link href="jquery-ui.min.css" rel="stylesheet">
<script src="jquery.min.js"></script>
<script src="jquery-ui.min.js"></script>
</head>
<body>
<div id="accord">
<h3>Tab 1</h3>
<div>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo consequat.
</p>
</div>
<h3>Tab 2</h3>
<div>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do ei et dolore magna aliqua.
Ut enim ad minim  exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</p>
</div>
<h3>Tab 3</h3>
<div>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo consequat.
</p>
</div>
</div>


CSS stylesheet

<style>
#accord
{
font-size: 18px;
}
.ui-accordion .ui-accordion-header
{
color:#585858;
border-color:#585858;
}
</style>




Javascript

<script>
$(function() {
$( "#accord" ).accordion();
});
</script>


Here we have used jqueryUI inbuilt function accordion to make the tabs. We have also used .ui-accordion and .ui-accordion-header classes in stylesheet, these classes are defined in jqueryUI.css file and accordion function in javascript works with these classes. It is not necessary that you define these classes in your stylesheet this is just to give custom style to tabs. Well in our script we have not used any constraint with the accordion function. Also as a result of above script atleast one tab will remain open always.



In the next example we are going to use accordion function with collapsible contraint.



Tab 1

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Tab 2

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do ei et dolore magna aliqua. Ut enim ad minim exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Tab 3

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.



HTML and CSS remains same as of above example.


Javascript

<script>
$(function(){
$( "#accord1" ).accordion({
collapsible: true
});
});
</script>


Now by using collapsible:true constraint we can also close all tabs.