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