Jquery is fast and rich Javascript library. It create things in html documents, event handling and animations. It is easy to use API that works across a browser
Introduction
The accordion allows to provide multiple options or sections. It displays one or more at a time.
Each option has built-in support for expanding and collapsing.Users can define a panel to be selected.
If it is not specified, then the first option is taken by default.
Collapse Content Accordion In JQuery
Accordion means options. In Jquery, this accordion declares that other
content and HTML element should be treated and managed as accordion
(Option) menus. These
options are the objects that specify the
appearance and behavior of the menu involved in it. Here we can provide
one or more options at a time using Javascript object. They can separate
by using a comma if there are more options to be provided.
In this
accordion, we have
Collapse Functionality. As we have learnt default functionality in accordion, now we will learn about
Collapse Functionality in
accordion Collapse Content Functionality
Here below we look into the usage of three options
collapsible in the accordion widget of JqueryUI.
Here The
Style sheet links should be written in head tags
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css"/>
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.1/jquery-ui.js"></script>
To obtain the Collapse Content Functionality, below jquery plugins are used.
code.jquery.com/jquery-1.10.2.js
code.jquery.com/ui/1.11.1/jquery-ui.js
The function code of the default accordion is mentioned in head tag
<script>
$(function() {
$( "#accordion" ).accordion({
collapsible: true
});
});
</script>We should take a div element to form accordion. In that we should mention all the Sections or options.
For each option we should give a div and a paragraph to form accordion
We should name the
div Id as accordion
<div id="accordion">
"h"tags are also used in the div to mention as headings in the form.
<h3> I am the default accordion <h3>
"P" tags are used in the page to set the format in an order
As mentioned above that we should take a div element to form accordion and we should mention all the sections or options in the div.
Here below it is shown clearly
<h3>Section 1</h3>
<div>
<p>The purpose behind Brila is to reconceive growing up?that period of
striving towards independence?as a creative process. Through various philosophical and
artistic outlets, youth participants learn to refine their own reasoning skills in order to
determine and express what kind of people they want to be.porttitor velit, faucibus interdum tellus libero ac justo.
Vivamus non quam. In suscipit faucibus urna </p>
</div>
<h3>Section 2</h3>
<div>
<p>The purpose behind Brila is to reconceive growing up?that period of
striving towards independence?as a creative process. Through various philosophical and
artistic outlets, youth participants learn to refine their own reasoning skills in order to
determine and express what kind of people they want to be.porttitor velit, faucibus interdum tellus libero ac justo.
Vivamus non quam. In suscipit faucibus urna. </p>
</div>
<h3>Section 3</h3>
<div>
<p>The purpose behind Brila is to reconceive growing up?that period of
striving towards independence?as a creative process. Through various philosophical and
artistic outlets, youth participants learn to refine their own reasoning skills in order to
determine and express what kind of people they want to be. </p>
<ul>
<li>List item one</li>
<li>List item two</li>
<li>List item three</li>
<li>Item Four </li>
<li>Item Five </li>
<li>Item Six </li>
</ul>
</div>
<h3>Section 4</h3>
<div>
<p>The purpose behind Brila is to reconceive growing up?that period of
striving towards independence?as a creative process. Through various philosophical and
artistic outlets, youth participants learn to refine their own reasoning skills in order to
determine and express what kind of people they want to be.. </p>
<p>The purpose behind Brila is to reconceive growing up?that period of
striving towards independence?as a creative process. Through various philosophical and
artistic outlets, youth participants learn to refine their own reasoning skills in order to
determine and express what kind of people they want to be. </p>
</div>
<h3>Section 5</h3>
<div>
<p>
The purpose behind Brila is to reconceive growing up?that period of
striving towards independence?as a creative process. Through various philosophical and
artistic outlets, youth participants learn to refine their own reasoning skills in order to
determine and express what kind of people they want to be.
</p>
</div>
<h3>Section 6</h3>
<div>
<p>
The purpose behind Brila is to reconceive growing up?that period of
striving towards independence?as a creative process. Through various philosophical and
artistic outlets, youth participants learn to refine their own reasoning skills in order to
determine and express what kind of people they want to be.
</p>
</div>In the above code, we have six options or sections in which we used
<p> tags,
<h> tags and
<div> elements.
The output of the code is shown below
In the above example Sections have icons. When we click on the sections the icons shows the collapse action.
The example of Collapse action for the section icons is shown below.
Conclusion
In this article we discussed about Collapse accordion functionality in Jquery. Previously we have learnt about default functionality. Here in this both are similar but functionality changes in Collapse content written in the script in head tag. Hope you understand
Reference
http://jqueryui.com/