Customize Icons Accordion Functionality

Vivek.Ramapuram
Posted by in jQuery category on for Intermediate level | Points: 250 | Views : 1319 red flag

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

<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.

<p>_ _ _ _ _ _ _ __</p>
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/ 

Page copy protected against web site content infringement by Copyscape

About the Author

Vivek.Ramapuram
Full Name: Vivek R
Member Level: Bronze
Member Status: Member,MVP
Member Since: 2/25/2014 12:46:59 PM
Country: India
RvGoud
http://www.dotnetfunda.com

Login to vote for this post.

Comments or Responses

Login to post response

Comment using Facebook(Author doesn't get notification)