Default functionality of accordion in Jquery

Vivek.Ramapuram
Posted by in jQuery category on for Intermediate level | Points: 250 | Views : 1099 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  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. 

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.

Default Functionality 

Here we mentioned an example for  accordion default widget functionality. In this, it passes no parameters to the accordion() method

This style sheet links should be written in the head tag 
<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">
Use this jquery version  to run the element mentioned
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();
     });
</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
<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 
 <h3>Option 1</h3>
        <div>
            <p>
               The crafting of clear, coherent paragraphs is the subject of considerable stylistic debate.
                 Forms generally vary among types of writing. For example, newspapers, scientific journals, 
                and fictional essays have somewhat different conventions for the placement of paragraph breaks.
            </p>
        </div>
        <h3>Option 2</h3>
<div> <p> The crafting of clear, coherent paragraphs is the subject of considerable stylistic debate. Forms generally vary among types of writing. For example, newspapers, scientific journals, and fictional essays have somewhat different conventions for the placement of paragraph breaks. </p> </div> <h3>Option 3</h3>
<div> <p> The crafting of clear, coherent paragraphs is the subject of considerable stylistic debate. Forms generally vary among types of writing. For example, newspapers, scientific journals, and fictional essays have somewhat different conventions for the placement of paragraph breaks. </p> <ul> <li> Item one</li> <li> Item two</li> <li> Item three</li> <li> Item Four </li> <li> Item Five </li> <li> Item Six </li> </ul> </div> <h3>Option 4</h3>
<div> <p> The crafting of clear, coherent paragraphs is the subject of considerable stylistic debate. Forms generally vary among types of writing. For example, newspapers, scientific journals, and fictional essays have somewhat different conventions for the placement of paragraph breaks. <p> English students are sometimes taught that a paragraph should have a topic sentence or "main idea", preferably first, and multiple "supporting" or "detail" sentences which explain or supply evidence. </p> </p> </div> <h3>Option 5</h3>
<div> <p> The crafting of clear, coherent paragraphs is the subject of considerable stylistic debate. Forms generally vary among types of writing. For example, newspapers, scientific journals, and fictional essays have somewhat different conventions for the placement of paragraph breaks. English students are sometimes taught that a paragraph should have a topic sentence or "main idea", preferably first, and multiple "supporting" or "detail" sentences which explain or supply evidence. </p> </div> <h3>Option 6</h3>
<div> <p> The crafting of clear, coherent paragraphs is the subject of considerable stylistic debate. Forms generally vary among types of writing. For example, newspapers, scientific journals, and fictional essays have somewhat different conventions for the placement of paragraph breaks. English students are sometimes taught that a paragraph should have a topic sentence or "main idea", preferably first, and multiple "supporting" or "detail" sentences which explain or supply evidence. </p> </div> </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


We can also create list items in between the Section or option by using "ul" unordered tag list in between "p" tags.
<ul>
    <li>List item One</li>
    <li>List item Two</li>
    <li>List item three</li>
</ul>
After adding this list in the above code, output will become  


Conclusion

In this article we discussed about accordion with default functionality in Jquery. Hope you understand 

Reference

http://jqueryui.com/
http://www.tutorialspoint.com/jquery/
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)