How to create a simple jQuery horizontal accordion

Aug 14, 2008

How to create a simple jQuery horizontal accordion

Categories: Featured, JavaScript and jQuery

Written By: admin

If you need to schedule a group event like a meeting try tymelie.com

First off, take a look at the demo (or download):

Lorem ipsum dolor sit amet, consectetur adipisci elit. Nunc ac ante sed ante imperdiet auctor. Fusce dignissim, magna eu feugiat tincidunt, nibh metus tincidunt augue, quis ullamcorper lorem pede a ante. Proin congue nisl a arcu. Donec et elit. Etiam ac eros nec metus molestie aliquam. Nullam vestibulum molestie magna. In varius quam in nulla luctus tristique. Nam et eros. Sed vitae sem a velit mattis dapibus. Sed blandit, sapien auctor adipiscing viverra, purus urna fermentum wisi, id luctus tortor augue et ligula. In quis libero. Sed urna arcu, malesuada in, adipiscing vitae, vehicula vitae, magna. Phasellus sit amet nisl at erat aliquet eleifend. Quisque malesuada porta elit.

Lorem ipsum dolor sit amet, consectetur adipisci elit. Nunc ac ante sed ante imperdiet auctor.

So, how to do this?
It’s easy, all you need is jQuery, a single PHP file and a font (*.ttf / *.otf). First off, we prepare the markup. As we want the whole thing to be as unobtrusive as possible, the markup we’re going to start with is very simple:

    <div class="accordion" title="Panel 1">Text</div>
    <div class="accordion" title="Panel 2">Text</div>
    <div class="accordion" title="Panel 3">Text</div>
    <div class="accordion currentAccordionPanel" title="Panel 4">Text</div>
    <div class="clearBoth"></div>

And that’s our accordion as it’s interpreted by the browser:

Text

Doesn’t look too sexy… but adding some CSS may already do the job:

.accordion {
	font-size:11px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	background-color: #EAF3FA;
	border: 1px solid #EAF3FA;
	padding: 3px;
	margin: 0px;
	float: left;
	width: 200px;
	height: 300px;
	overflow: auto;
}
 
.accordionTitle { /* This one will be generated by the jQuery part */
	background-color: #72A8CF;
	color:#FFFFFF;
	border: 1px solid #72A8CF;
	border-right: 1px solid #FFFFFF;
	cursor: pointer;
	padding: 3px;
	margin: 0px;
	float: left;
	height: 301px;
	overflow: auto;
}
 
.clearBoth { clear: both; }

Hey, guess what? - We’re done with the markup! Now a few lines of jQuery magic and the whole thing is ready to use

jQuery(document).ready(function() {
	var elementToTransform = ".accordion" // The element we transform into an accordion
	var accordionTitleCass = "accordionTitle";
	var currentClass = ".currentAccordionPanel";
	var textRotatePath = "path/to/rotateText.php";
	var bgColor = "72A8CF";
	var fontColor = "FFFFFF";
 
	jQuery(elementToTransform).each(function() {
		jQuery(this).before('<div class="'+accordionTitleCass+'"><img src="'+textRotatePath+'?text='+jQuery(this).attr("title")+'&bgColor='+bgColor+'&fontColor='+fontColor+'" alt="'+jQuery(this).attr("title")+'" /></div>');
	});
	jQuery(elementToTransform).hide();
	jQuery(currentClass).show();
	disableAccordion = false;
	jQuery("."+accordionTitleCass).click(function() {
		if(disableAccordion != true) {
			disableAccordion = true;
			jQuery(elementToTransform+":visible").hide(400);
			jQuery(this).next(elementToTransform).show(400, function() {
				disableAccordion = false;
			});
		}
	})
});

What exactly does the code do?

	var elementToTransform = ".accordion" // The element we transform into an accordion
	var accordionTitleCass = "accordionTitle";
	var currentClass = ".currentAccordionPanel";
	var textRotatePath = "path/to/rotateText.php";
	var bgColor = "72A8CF";
	var fontColor = "FFFFFF";

Here we define some variables. You’re allowed to change their values. If you change the first two, don’t forget to change the CSS too The last three are used for a PHP script that generates you a 90 degrees rotated text. The first of them is self-explanatory, the last two also - but they should match with the CSS values for “background-color” and “color” (from “accordionTitleCass “, of course).

jQuery(elementToTransform).each(function() {
		jQuery(this).before('<div class="'+accordionTitleCass+'"><img src="'+textRotatePath+'?text='+jQuery(this).attr("title")+'&bgColor='+bgColor+'&fontColor='+fontColor+'" alt="'+jQuery(this).attr("title")+'" /></div>');
	});

This one ads the accordion titles to your accordion. (in the example those are the dark blue strips). And it takes the title attribute from each of your accordion panels and converts it into a 90 degrees rotated image containing your text. Nice, isn’t it?

	jQuery(elementToTransform).hide();
	jQuery(currentClass).show();

We’re hiding all panels and then showing the one that has the “current” class. If you don’t wan’t to show any of the panels as default, just don’t add such a “current” class to none of the panels.

Ther rest of the code just enables the accordion to slide it’s panels and isn’t worth explaining. So yup, we’ve done it! Our accordion is ready to use
Here’s how it looks:

Text

You can download all the files here. Have fun!

akouel Says:
October 8th, 2008 at 5:03 pm

hello nice code

but commits can be done to save
. accordionTitle: hover (
cursor: pointer;
background-image: url (img / fondlinkmm.gif);
)

because I tried but it does not work anymore!
and transparency does not

thank you for everything

zac Says:
October 13th, 2008 at 10:46 am

Hi, thanks for posting this. After installing this code I thought of a few things that would improve it (for me at least). For one, how could one add a hover state to the .accordionTitle ? I tried it with CSS but I think it must have to be altered in the rotate script.

Also, would it work to give the accordion divs an id so that anchor links would appear in the address bar ?

Thanks again for sharing

Blog.Skynapse » Javascript Accordians Says:
November 15th, 2008 at 7:17 am

[...] view demo [...]

alex Says:
December 10th, 2008 at 4:03 am

save to my Bookmarks )

Timur Alhimenkov Says:
January 28th, 2009 at 3:47 am

Good work! Thank you very much!
I always wanted to write in my blog something like that. Can I take part of your post to my blog?
Of course, I will add backlink?

Regards, Timur I.