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. Accordion is not specified, then the first option is taken by default.
Auto Height 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.It defines auto height by the text size automatically
In this
accordion, we have
Auto Height Functionality. As we have learnt
Default functionality and
Collapse Content in accordion, now we will learn about
Auto Height Functionality in
accordion Auto Height Functionality
Here below we look into the usage of three options
Auto Height 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 Auto Height 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({
heightStyle: "content"
});
});
</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
<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>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> In the above code, we have three 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 Auto Height action.
The example of for Auto Height action the section icons is shown below.
This functionality works as default height in the sections. When we write a paragraph or list items in this, it automatically sets height.
Conclusion
In this article we discussed about Auto Height functionality in Jquery. Previously we have learnt about Default
functionality and Collapse Content 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/