Fill Space Accordion Functionality in JQuery

Vivek.Ramapuram
Posted by in jQuery category on for Beginner level | Points: 250 | Views : 2061 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
Recommendation
Read Auto Height Functionality accordion in Jquery before this article.

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, 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 this accordion declares that other content and HTML element should be treated and managed as accordion (Option) menus.It re sizes the menu to which size we want in the given function.

Fill Space Accordion in JQuery

As we have learnt previous accordions (Default Functionality, Collapse Content Functionality & Auto Height Functionality , Customize Icon Functionality).This Fill Space Accordion Functionality  is an object that defines the icons to use to the left of the header text for opened and closed panels.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 re sizer accordion Height accordion fill space function in the text field.

Fill Space Functionality

Here below we look into the usage of three options Fill Space in the accordion widget of JQueryUI.
Here The Style  sheet links should be written in head tags Explain the topic of the article with code and description
 <link rel="stylesheet" href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css">
    <script src="//code.jquery.com/jquery-1.10.2.js"></script>
    <script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
    <link rel="stylesheet" href="/resources/demos/style.css">
To obtain the Fill Space 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
Here we are mentioning about re sizer   to run the fill space  functionality.This functions should be written in the <style> tags and should be inherited in <head/> tag
 <style>
        #accordion-resizer {
            padding: 20px;
            width: 400px;
            height: 250px;
        }
    </style>
Here we are mentioning the function of Fill space functionality.This should be inherited in the <script/> tag
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-re-sizer
  <div id="accordion-resizer" class="ui-widget-content">
        <div id="accordion">


"h"tags are also used in the div to mention as headings in the form.
 <h3>Resize the outer container</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 Fill Space accordion and we should mention all the sections or options in the div.
Here below it is shown clearly 
 <h3>Resize the outer container:</h3>
    <div id="accordion-resizer" class="ui-widget-content">
        <div id="accordion">
            <h3>Section 1</h3>
            <div>
                <p>DotNetFunda.Com is a popular online tutorials and guide for latest Microsoft® technologies
                 aimed for beginners and intermediate level professionals. We help beginners to become intermediate 
                level professionals and help intermediate level professionals to become an expert. 
                By following our different sections regularly, we hope you will soon become one of the 'Most Valuable'
                 professional and start shining in your career.</p>
            </div>
            <h3>Section 2</h3>
            <div>
                <p>DotNetFunda.Com is a popular online tutorials and guide for latest Microsoft® technologies 
                aimed for beginners and intermediate level professionals. We help beginners to become intermediate
                 level professionals and help intermediate level professionals to become an expert. By following our 
                different sections regularly, we hope you will soon become one of the 'Most Valuable'
                 professional and start shining in your career. </p>
            </div>
            <h3>Section 3</h3>
            <div>
                <p>DotNetFunda.Com is a popular online tutorials and guide for latest Microsoft® technologies 
                aimed for beginners and intermediate level professionals. We help beginners to become intermediate 
                level professionals and help intermediate level professionals to become an expert. 
                By following our different sections regularly, we hope you will soon become one of the 'Most Valuable' 
                professional and start shining in your career.</p>
                <ul>
                    <li>List item one</li>
                    <li>List item two</li>
                    <li>List item three</li>
                </ul>
            </div>
            <h3>Section 4</h3>
            <div>
                <p>DotNetFunda.Com is a popular online tutorials and guide for latest Microsoft® technologies 
                aimed for beginners and intermediate level professionals. We help beginners to become intermediate 
                level professionals and help intermediate level professionals to become an expert.
                 By following our different sections regularly, we hope you will soon become one of the 'Most Valuable' 
                professional and start shining in your career.</p>
            </div>
        </div>
Here Example is shown in below

Here at the bottom  edge we can see the  re sizer.We can drag the content up to which size we want .So this Re-sizer is used in the accordion and it is named as fill space accordion.
Here in the below example .We can see that how the functionality runs when we toggle.


Conclusion

In this article we discussed about Fill space functionality in JQuery. Previously we have learnt about Default functionality and Collapse Content functionality , Auto Height Functionality . Here these are similar but functionality changes in Fill Space  written in the script in head tag. Hope you understand 

Reference

www.dotnetfunda.com
http://jquery.com/



Recommendation
Read Customize Icons Accordion Functionality after this article.
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)