jQuery UI Widget : Accordion

This page discusses - jQuery UI Widget : Accordion

jQuery UI Widget : Accordion

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 :

Download Source Code

Click here to see online demo

Learn from experts! Attend jQuery Training classes.