Latest Tutorials| Questions and Answers|Ask Questions?|Site Map



Home Ajax Jquery jQuery UI Widget : Accordion

Related Tutorials


 
 

Share on Google+Share on Google+

jQuery UI Widget : Accordion

Advertisement
This page discusses - 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.

Advertisement

If you enjoyed this post then why not add us on Google+? Add us to your Circles



Liked it!  Share this Tutorial


Follow us on Twitter, or add us on Facebook or Google Plus to keep you updated with the recent trends of Java and other open source platforms.

Posted on: April 18, 2011

Related Tutorials

Discuss: jQuery UI Widget : Accordion  

Post your Comment


Your Name (*) :
Your Email :
Subject (*):
Your Comment (*):
  Reload Image
 
 
Comments:0
DMCA.com