JQuery Collapse lightweight accordion menu plug-in

The jquery Collapse is a lightweight jquery plugin for expanding and storing elements, supporting cookies for State preservation, which is what we often talk about accordion menu effects. The plug-in uses a convenient and lightweight solution to shrink the menu.

Characteristics

Persistence of

JQuery Collapse saves data using HTML5 localstorage or cookies on page loads, so the next time you open the page you can see the last saved results. And no additional code deployment is allowed.

Accordion

The collapse of jquery is packed with the classic "accordion" behavior that can easily be turned on and off.

Wai-aria specification

Plugins are designed in mind Wai-aria defines a way to make Web content and Web applications more accessible to people with disabilities.

Lightweight

The design of the jquery crash is lightweight with the smallest expansion. This is just ~ 1KB, compile and gzip compressed!

Cross-browser compatibility

In ie6+, Firefox3 +, Chrome5 +, Safari4 + full test, Opera 10 +. Gracefully demote in an unsupported browser.

How to use

Loading jquery files and jquery Collapse plug-in files in a Web page

<script src= "Http://cdn.uedsc.com/jquery/1.8.1/jquery.min.js" ></script>
<script src= "Jquery.collapse.js" ></script>
Write HTML code that resembles the following structure

<div data-collapse>
<ul>
<li>Apple</li>
<li>Pear</li>
<li>Orange</li>
</ul>
<div>
<p>you can use the any container as a DIV element </p>
</div>
</div>
Using jquery collapse is simple, where the Data-collapse property is used to control the zoom of the menu.

Default Open/Shrink menu

The standard behavior is to load all the parts on the page. If you want to show the user the part of the page that is loaded, you can do so by adding an open class class, such as the following code.

<div data-collapse>
<H2 class= "Open" >i ' m open by default<p>Yay</p>
</div>
Expand all the Elements

You can expand and close all elements through a script event, for example, we have the following HTML code.

<div id= "Test" data-collapse>
<p>i ' m first</p>
<p>i ' m second/p>
</div>
Now you can use the trigger method to achieve the results you want, such as the following JavaScript code

$ ("#test"). Trigger ("open")//Open all sections
$ ("#test"). Trigger ("close")//Close all sections
$ ("#test h2 a"). Trigger ("open")//Open a
For more function methods, see the following method function section.

How to use JavaScript

If you don't like to use the Data-collapse attribute in HTML to customize it, then you can do it in a scripted way.

$ ("#demo"). Collapse ({
Options ...
});
If you don't like using the JQuery ($) method, you can also use the following method to instantiate

New Jquerycollapse ($ ("#demo"), {
Options ...
});
Using a custom HTML structure

By default, the plug-in will look for a set of elements. HTML tags may be different in the actual production environment, and you will need to customize the interpretation of Plug-ins. For example:

<div id= "Demo" >
<div>
<div>details...</div>
</div>
<div>
<div>details...</div>
</div>
</div>
To understand the above tag, we can specify the header/profile element of a section by using a "query" option:

New Jquerycollapse ($ ("#demo"), {
Query: ' div H2 '
});
External markup Example

You can also use any link to fold and enlarge a section on one page:

<a id= "Toggle" href= "#demo" >toggle section</a>
<div id= "Demo" data-collapse>
<div>
<div>details...</div>
</div>
</div>
You then attach the event handlers to your links and to the events that use jquery crashes to toggle the parts:

$ ("#toggle"). Click (function () {
$ (This.hash). Trigger ("toggle");
});
Custom Click event

Sometimes you want to customize the elements in the summary of the crash, which should trigger the open/close action. Consider the following markup:

<div id= "Custom-click-query" >
<div class= "Test" >
<a href= "http://www.111cn.net" >Google.com</a> <span class= "Toggle" >info</span>
</div>
<div>
<p>find Stuff on Google</p>
</div>
<div class= "Test" >
<a href= "http://www.111cn.net" >Twitter.com</a> <span class= "Toggle" >info</span>
</div>
<div>
<p>tweet Stuff on Twitter</p>
</div>
</div>

Now use the Clickquery option to trigger the action only when the span clicks

$ ("#custom-click-query"). Collapse ({
Clickquery: "Span.toggle"
});

Accordion

The accordion effect can be achieved by setting the Data-collapse value in the above instance to accordion

<div data-collapse= "Accordion" >
...
</div>

Persistence of

By default, all content that the user reloads the page will be closed. If you want to keep the previously folded part open, you can add "persist" to the Data-collapse property:

<div id= "Demo" data-collapse= "persist" >
...
</div>

and include the enclosure in your document after the other scripts.

<script src= "Jquery.collapse_storage.js" ></script>
In the above example, the target element (#demo) will require persistent work, an ID, and you can combine the accordion with the persistence option to add a data-collapse attribute of two values:

<div id= "Demo" data-collapse= "accordion persist" >
...
</div>

JQuery Collapse uses HTML5 localstorage to save data if available, otherwise it will attempt to use cookies (read about IE support). If this also fails, it will degrade the work, but without any persistence.

Support for less than IE7 browsers

IE 6-7 You need support to include cookie storage to work properly, JSON2 and cookie repositories:

<!--[if Lt IE 8]>
  <script src= "Jquery.collapse_cookie_storage.js" ></SCRIPT>
  <script src= "Json2.js" ></SCRIPT>
<![ Endif]-->