Next Prev

Accordion

The demo presents the effect of an accordion. It's fun and easy to implement using AJAX.

Visit PhpDaddy.com

Play with this script by changing the html bellow. Submit your changes by clicking on this bar. Refresh the page to reset changes.

<html>
<head>
<base href="http://www.ajaxdaddy.com/web20/jquery/interface-accordion/">
      <style type="text/css">
        body {color: white;background: #52616F;} 
        a {  color: white; }
      </style>
<meta http-equiv="Content-Language" content="en" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Accordion - Interface plugin for jQuery</title>
		<script type="text/javascript" src="javascript/jquery.js"></script>
		<script type="text/javascript" src="javascript/interface.js"></script>
    <link   type="text/css"       href="css/interface-accordion.css" rel="stylesheet"> 
</head>
<body>
<dl id="myAccordion">
	<dt class="someClass">Lorem ipsum dolor</dt>
	<dd>
		<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vestibulum odio urna, hendrerit ac, nonummy et, tempor commodo, eros. Etiam ac dui id lectus imperdiet euismod. In vitae est. Nunc quis lacus. Aenean convallis. Aliquam erat volutpat. Aliquam justo eros, tristique sit amet, fringilla et, bibendum ac, arcu. Nulla in lacus non lectus volutpat vehicula. Sed non magna imperdiet nisi pharetra ullamcorper. Nullam quis quam.</p>
		<p>Ut quis massa. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aenean nunc ligula, egestas in, dictum a, porttitor in, pede. Curabitur blandit faucibus massa. Aliquam nonummy laoreet libero. Phasellus euismod erat eu risus. Ut placerat egestas risus. Donec nisl nibh, aliquam vel, porttitor non, condimentum quis, risus. Vestibulum eleifend vulputate lectus. Aliquam id turpis. Aliquam erat volutpat.</p>
	</dd>
	<dt class="someClass">Ut quis massa</dt>
	<dd>
		<p>Ut quis massa. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aenean nunc ligula, egestas in, dictum a, porttitor in, pede. Curabitur blandit faucibus massa. Aliquam nonummy laoreet libero. Phasellus euismod erat eu risus. Ut placerat egestas risus. Donec nisl nibh, aliquam vel, porttitor non, condimentum quis, risus. Vestibulum eleifend vulputate lectus. Aliquam id turpis. Aliquam erat volutpat.</p>
	</dd>
	<dt class="someClass">Morbi odio</dt>
	<dd>
		<p>Nulla lorem lacus, congue nec, suscipit nec, hendrerit sit amet, lorem. Vestibulum dolor. Donec et ante et massa mollis sagittis. Nullam elementum cursus justo. Proin leo ante, consequat eu, tincidunt ac, consectetuer ac, massa. Cras dictum. Aliquam quis enim. Quisque ac magna et lorem porta tincidunt. Fusce nulla. Praesent euismod sagittis mauris. Curabitur eu nisl. Duis purus. Pellentesque justo nibh, mattis non, sollicitudin a, aliquam vitae, urna. Suspendisse tempor odio ut turpis ornare accumsan. Fusce leo. Mauris molestie nisl quis purus.</p>
	</dd>
	<dt class="someClass">Phasellus non nisl</dt>
	<dd>
		<p>Etiam mi justo, accumsan a, scelerisque auctor, tempus sed, enim. Vivamus tristique ipsum quis lectus. Cras nec lectus. Duis luctus convallis massa. Ut augue enim, aliquam vel, posuere accumsan, bibendum ut, leo. Nunc sed purus. In vel neque. Donec lobortis, tellus at dignissim porta, ante sapien facilisis nibh, non ullamcorper dolor purus in urna. Nulla libero. Nulla eget est. Quisque est mauris, semper at, tincidunt et, lacinia sed, ligula. Nullam dolor ligula, ullamcorper at, accumsan sit amet, eleifend vitae, libero.</p>
	</dd>
	
</dl>
<script type="text/javascript">
	
	$(document).ready(
		function()
		{
			$('#myAccordion').Accordion(
				{
					headerSelector	: 'dt',
					panelSelector	: 'dd',
					activeClass		: 'myAccordionActive',
					hoverClass		: 'myAccordionHover',
					panelHeight		: 200,
					speed			: 300
				}
			);
		}
	);
</script>

		<script language="JavaScript" type="text/javascript">var client_id = 1;</script>
		<script language="JavaScript" src="http://stats.byspirit.ro/track.js" type="text/javascript"></script>
		<noscript>
		<p><img alt="" src="http://stats.byspirit.ro/image.php?client_id=1" width="1" height="1" /></p>
		</noscript>
</body>
</html>

Play with this script by changing the html above. Submit your changes by clicking on this bar. Refresh the page to reset changes.

Comment on this example

Brian

2008-05-26 22:10:27

What are these references to the URL http://stats.byspirit.ro? This doesn't seem safe or secure to be referencing another site or URL. (BTW... this site's captcha sux - it's impossible to read)

Movie Reviews

2008-05-05 22:57:29

Thank you, it is very useful

Frank

2008-01-23 08:14:38

Best for accordions is still mootools, as it has cross-browser functionality and works like a charm.

Chris

2007-10-30 06:00:12

It works fine in IE7

Videobored

2007-10-18 12:24:53

Does anyone know of another solution that also works well in IE? I need this functionality, but it has to be cross-browser friendly.

Aaaachoooo

2007-10-05 07:45:38

this accordion flashes the entire content div as it moves, but only in IE.

Vs007vs

2007-08-26 09:24:33

It's very good.Effective and quickly.Thanks.

Meysam

2007-07-06 09:12:39

is best

Welcome to AjaxDaddy.com

A large collection of nifty web 2.0 demos

Accordion

The demo presents the effect of an accordion. It's fun and easy to implement using AJAX.

Comment on this example