In the past this blog has dealt on creating horizontal accordions of different types. If you wish to implement them for your website, do look at the accordions here and here.
Let us now turn to vertical accordion, and this video article will explain how you can easily create vertical JavaScript accordion in your website.
There are a few ways to do this with freely available JavaScript, and the one here is done with the lightweight accordion script written by Michael Leigeber.
You can see the vertical JavaScript accordion in action below in 2 styles, or you may like to see it in Michael’s website here. Michael has since updated it to include nested vertical accordion.
How To Do It
Look at the vertical JavaScript accordion displayed on the left. The 2 types shown are different by virtue of their styles.
Click on the headings to see how each section unfolds. You will notice that a section expands according to the amount of content it has. Also note that when the page uploads the first accordion comes with all its sections closed, but the second accordion has the second section open.
You can make any section open or none at all on upload by simply altering the small piece of JavaScript that comes toward the end of the HTML code (below). This script initializes the accordions as the page uploads.
So, in this line from the code, slider2.init(“slider2″,1,”open”), the init function takes 3 parameters. They are respectively the id of the “dl”, the location of the initially expanded section (optional; ‘0’ being the first one) and the class for the active header (optional).
Study the CSS and the HTML codes that are given below. They are not difficult to understand and implement. Click here for Michael’s lightweight JavaScript code collected from his site for the vertical accordion as shown top left.
Though the accordion here has 3 sections only, rest assured you can have as many sections as you need. You can change the appearance of the accordion by altering the styles.
In a future article we will attempt to demonstrate how the vertical accordion can be used to display attractive product catalog.
We will also look at other ways of creating vertical JavaScript accordion.
CSS Code
* {margin:0; padding:0}
#accordion1 {width:253px; margin:0; padding: 0 3px 3px; border:1px solid #999;}
.accordion1 {width:253px; font:12px Verdana,Arial; color:#033}
.accordion1 dt {width:231px; border:3px double #369; padding:8px; font-weight:bold; margin-top:3px; cursor:pointer; background:url(header.jpg)}
.accordion1 dt:hover {background:url(header-over.jpg)}
.accordion1 dd {overflow:hidden; background:#fff}
.accordion1 span {display:block; width:231px; border:3px double #00F; border-top:none; padding:8px;}
#accordion2 {width:259px; margin:0; border:1px solid #333; border-top:none}
.accordion2 {width:259px; font:12px Verdana,Arial; color:#333}
.accordion2 dt {width:247px; padding:4px 6px; font-weight:bold; cursor:pointer; background-color:#666; background-image:url(arrow-down.gif); background-position:right center; background-repeat:no-repeat; color:#fff; border-top:1px solid #333}
.accordion2 dt:hover {background-color:#555}
.accordion2 .open {background-color:#444; background-image:url(arrow-up.gif)}
.accordion2 dd {overflow:hidden; background:#fff}
.accordion2 span {display:block; width:229px; border-top:none; padding:8px}
HTML Code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<title>Lightweight Vertical JavaScript Accordion</title>
<link rel="stylesheet" href="vertical-javascript-accordion.css" type="text/css" />
<script type="text/javascript" src="vertical-javascript-accordion.js"></script>
</head>
<body>
<!-- Top Accordion -->
<h3>Accordion 1</h3>
<div id="accordion1">
<dl class="accordion1" id="slider">
<dt>About This Accordion</dt>
<dd>
<span>This is a lightweight (1.2 KB) JavaScript accordion that can be easily tailored to match with any website.</span>
</dd>
<dt>Possibility For Use</dt>
<dd>
<span>As you open this portion, only text appears. But you can include image as well. Also, make the accordion as long as required.</span>
</dd>
<dt>How Much It Expands?</dt>
<dd>
<span>Each portion adjusts with the amount of content therein.</span>
</dd>
</dl>
</div>
<p> </p>
<!-- Bottom Accordion -->
<h3>Accordion 2</h3>
<div id="accordion2">
<dl class="accordion2" id="slider2">
<dt>About This Accordion</dt>
<dd>
<span>This is a lightweight (1.2 KB) JavaScript accordion that can be easily tailored to match with any website.</span>
</dd>
<dt>Possibility For Use</dt>
<dd>
<span>As you open this portion, only text appears. But you can include image as well. Also, make the accordion as long as required.</span>
</dd>
<dt>How Much It Expands?</dt>
<dd>
<span>Each portion adjusts with the amount of content therein.</span>
</dd>
</dl>
</div>
<!-- Initializing Accordions -->
<script type="text/javascript">
var slider1=new accordion.slider("slider1");
slider1.init("slider");
var slider2=new accordion.slider("slider2");
slider2.init("slider2",1,"open");
</script>
</body></html> This article of October 30th, 2009 is authored by Partha Bhattacharya, who runs this website. Catering to the clients' video needs aside, Partha also writes guest articles for other web publications. |
Hi,
Great to see this tutorial!
If I understand correctly, there are three different elements to make this work: JavaScript code, CSS and HTML…
I’m using Thesis theme in a WordPress blog. And I’m just trying to figure out where everything goes. The HTML is obvious… in the post. I suppose the CSS would go in my Custom Styling area of OpenHook.
Does the JavaScript go in the header?
And do I need anything else? I’ve read about a jQuery “library” that you have to install on your server. Is that necessary here?
Sorry if these questions seem dumb — total Newbie…
Cheers,
Adam
Hmm. Tried it the way I thought it might work. But no luck…
Adam,
Things may seem disappointing but hopefully they’ll improve. Let me try to answer some of your queries.
You don’t need the jQuery library here…just the JavaScript file and the CSS code. The CSS code applies to the accordion, but you may simply copy and paste it in your main CSS file in addition to whatever you have there. This minimizes the need of a separate CSS file.
If you have separate CSS file for the accordion, all you need is to call this file and the JS file before the accordion is located in the page html. It’s a good practice to have the CSS and JS files referred to in the head section, but they may likely work even if you have them within the page html before the accordion code. Try out and see.
Do write back if you have problem implementing.
Cheers!:)