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 providing multiple options or sections.
Accordion 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.
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
Customize Icons Accordion Functionality
As we have learnt previous accordions (Default Functionality, Collapse Content Functionality & Auto
Height Functionality).This Customize
Icons Functionality is
an object that defines the icons to use to the left of the header text for
opened and closed panels. The icon to use for closed panels is specified as a
property named header, whereas the
icon to use for open panels is specified as a property named header
Selected.
This style sheet links should be written in the head tag.
<head>
<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>
<link rel="stylesheet" href="/resources/demos/style.css"/>
</head>The function code of the customize icons functionality accordion is mentioned in head tag.This should be written after the link sheets mentioned above.
<script>
$(function () {
var icons = {
header: "ui-icon-circle-arrow-e",
activeHeader: "ui-icon-circle-arrow-s"
};
$("#accordion").accordion({
icons: icons
});
$("#toggle").button().click(function () {
if ($("#accordion").accordion("option", "icons")) {
$("#accordion").accordion("option", "icons", null);
} else {
$("#accordion").accordion("option", "icons", icons);
}
});
});
</script>From the above code ui-icons are used in this Customize Icon Accordion Functionality. There are many icons in jQuery.
For Example
ui-icon-circle-arrow-s
ui-icon-circle-arrow-w
ui-icon-person
ui-icon-locked
And there are many icons in JQuery to customize icons
functionality.
Here, Toggle function is written in the code. This toggle function
is used to move the action of the particular function.
Example, from the above JQuery code we have written toggle function to icons
and given a toggle button. Then if we double click the toggle button it shows
Icons and again if we double click on the button it hides. This function is
done by the toggle function.
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
"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
<div id="accordion">
<h3>Section 1</h3>
<div>
<p>KidsFunda.com is absolutely free & safe online platform for kids to learn, explore things in fun way.
Initially this website was developed to facilitate learning for my daughter.</p>
</div>
<h3>Section 2</h3>
<div>
<p>KidsFunda.com is absolutely free & safe online platform for kids to learn, explore things in fun way.
Initially this website was developed to facilitate learning for my daughter,.</p>
</div>
<h3>Section 3</h3>
<div>
<p>KidsFunda.com is absolutely free & safe online platform for kids to learn, explore things in fun way.
Initially this website was developed to facilitate learning for my daughter. </p>
<ul>
<li>learn and play safe and free</li>
<li>solve their educational assignments easily and fun way</li>
<li> get knowledge safe and in easy way</li>
<li>spend time learning good stuffs on internet</li>
<li>Creating chart paper for different objects that kids can readily use to solve assignments</li>
<li>Submitting Quiz questions</li>
</ul>
</div>
</div>
<button id="toggle">Toggle icons</button>
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 Customize Icon action.If We want to hide the icons just click on the toggle icon.It hides all the icons as we said that toggle functions is written.Below example is shown
This functionality works as Customized icons in the sections. When we click on the toggle button,it hides or shows the icons.
Conclusion
In this article we discussed about
Customized Icon Accordion functionality in Jquery. Previously we have learnt about
Default
functionality ,
Collapse Content functionality and
Auto Height Functionality. Here these are similar but functionality changes
in
Auto Height written in the script in
head tag. Hope you
understand
Reference
http://jqueryui.com/