jQuery UI Widget : Accordion
jQuery UI Widget : Accordion
Using accordion widget , you can create multiple content panel, but doesn't allow more than one content panel to be open at the same time.
The markup of your accordion container needs pairs of headers and content panels :
<div id="accordion">
<h3><a href="#">First header</a></h3>
<div>First content</div>
<h3><a href="#">Second header</a></h3>
<div>Second content</div>
</div>
For options, events ,method and theming click here
EXAMPLE :
accordion.html
| <!DOCTYPE html> <html> <head> <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base /jquery-ui.css" rel="stylesheet" type="text/css"/> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"> </script> <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"> </script> <script> $(document).ready(function() { $("#accordion").accordion(); }); </script> </head> <body style="font-size:62.5%;"> <div id="accordion"> <h3><a href="#">Part 1 : John Resig</a></h3> <div> <p> John Resig is a JavaScript Evangelist for the Mozilla Corporation and the creator and lead developer of the jQuery JavaScript library. This library's goal is to simplify the process of writing JavaScript code that is compatible with all web browsers.For his work on jQuery he was inducted into the Rochester Institute of Technology's Innovation Hall of Fame on April 30, 2010. </p> </div> <h3><a href="#">Part 2 : Resig 's achievment</a></h3> <div> <p> Resig has also been involved in the creation of several other JavaScript libraries including FUEL (for Firefox plugin development),Processing.js (for visual effects) and Sizzle (for CSS selectors). "The Google Address Translation, was developed by John Resig and gives Google Maps the ability to convert any US Postal Address into Latitude/Longitude coordinates," according to WebProNews </p> </div> <h3><a href="#">Part 3 : jquery</a></h3> <div> <p> jQuery is a cross-browser JavaScript library designed to simplify the client-side scripting of HTML. It was released in January 2006 at BarCamp NYC by John Resig. Used by over 31% of the 10,000 most visited websites, jQuery is the most popular JavaScript library in use today. </p> <ul> <li>List item one</li> <li>List item two</li> <li>List item three</li> </ul> </div> <h3><a href="#">Part 4 : jQuery plugin</a></h3> <div> <p> Because of jQuery's architecture, other developers can use its constructs to create plug-in code to extend its functionality. Currently there are thousands of jQuery plug-ins available on the web[11] that cover a wide range of functionality such as Ajax helpers, webservices, datagrids, dynamic lists, XML and XSLT tools, drag and drop, events, cookie handling, modal windows, even a jQuery-based Commodore 64 emulator </p> <p> An important source of jQuery plug-ins is the Plugins sub-domain of the jQuery Project website. There are alternative plug-in search engines that take more specialist approaches, such as only listing plug-ins that meet certain criteria (e.g. those that have a public code repository). </p> </div> </div> </body> </html> |
Output :
Learn from experts! Attend jQuery Training classes.