In this post I wanna show you how to build an accordion like I did for the Linz Productions website: www.linzproductions.ch.
Here’s what we will end up with in this tutorial.
And here you can download the final sourcecode.
With jQuery and CSS this is pretty easy. But first let’s take a look at how an accordion is set up. We got a wrapper div. In our case we called it “accordion”. Inside that wrapper div we got divs that contain anchor tags and we got divs that contain the content. We give the anchor tag divs a class called “panel” and the content divs a class called “content”. For this example I put in some placeholder text in the content divs. Your HTML should kinda look like that now:
<div id="accordion">
<div class="panel"><a href="#">Panel 1</a></div><!-- end panel -->
<div class="content">
<p>Morbi augue. Maecenas mollis rutrum velit. Donec eget odio. Donec lorem nulla, accumsan vitae, dignissim eu, molestie non, ante. Curabitur nisl. Mauris felis neque, tristique in, suscipit vel, blandit a, dui. Praesent ante. Aenean eu metus. Proin nisl dui, congue a, pulvinar et, commodo non, nisi.</p>
<p>Morbi augue. Maecenas mollis rutrum velit. Donec eget odio. Donec lorem nulla, accumsan vitae, dignissim eu, molestie non, ante. Curabitur nisl. Mauris felis neque, tristique in, suscipit vel, blandit a, dui. Praesent ante. Aenean eu metus. Proin nisl dui, congue a, pulvinar et, commodo non, nisi.</p>
</div><!-- end content -->
<div class="panel"><a href="#">Panel 2</a></div><!-- end panel -->
<div class="content">
<p>Morbi augue. Maecenas mollis rutrum velit. Donec eget odio. Donec lorem nulla, accumsan vitae, dignissim eu, molestie non, ante. Curabitur nisl. Mauris felis neque, tristique in, suscipit vel, blandit a, dui. Praesent ante. Aenean eu metus. Proin nisl dui, congue a, pulvinar et, commodo non, nisi.</p>
</div><!-- end content -->
<div class="panel"><a href="#">Panel 3</a></div><!-- end panel -->
<div class="content">
<p>Morbi augue. Maecenas mollis rutrum velit. Donec eget odio. Donec lorem nulla, accumsan vitae, dignissim eu, molestie non, ante. Curabitur nisl. Mauris felis neque, tristique in, suscipit vel, blandit a, dui. Praesent ante. Aenean eu metus. Proin nisl dui, congue a, pulvinar et, commodo non, nisi.</p>
</div><!-- end content -->
<div class="panel"><a href="#">Panel 4</a></div><!-- end panel -->
<div class="content">
<p>Morbi augue. Maecenas mollis rutrum velit. Donec eget odio. Donec lorem nulla, accumsan vitae, dignissim eu, molestie non, ante. Curabitur nisl. Mauris felis neque, tristique in, suscipit vel, blandit a, dui. Praesent ante. Aenean eu metus. Proin nisl dui, congue a, pulvinar et, commodo non, nisi.</p>
</div><!-- end content -->
</div><!-- end accordion -->
That’s it for the HTML. Now let’s take a look at the CSS.
First we give the accordion div an absolute position, some width and auto height. To make it look a bit nicer some padding and a background-color:
#accordion {
position:absolute;
width:400px;
height:auto;
padding:10px;
background:#333;
}
Now we style the panel divs:
.panel {
background:#222;
height:20px;
width:100%;
}
To make it look even nicer let’s style the anchor tag inside the panel divs:
.panel a:link, .panel a:visited, .panel a:hover, .panel a:active {
font-family:Georgia, "Times New Roman", Times, serif;
font-size:14px;
font-weight:normal;
color:white;
text-transform:uppercase;
text-decoration:none;
display:block;
margin:5px;
}
Maybe I should explain this a little bit. I guess you get the font-styling. What could be a bit confusing is the display:block; statement. What we achieve with this is that the user get’s the pointer cursor over the whole panel and not only when he hovers over the text of the anchor tag.
Let’s give the content divs some styling now. Nothing special. Just to make it look smooth.
.content {
color:white;
height:auto;
width:100%;
padding:5px;
}
Now let’s get down to the nitty gritty and set up some functionality in jQuery. As always you have to link to the jQuery-library in your html file. You can check that out in the sourcecode. And we have to put our function in the jQuery function:
$(function(){
});
The next few statements will be placed into the jQuery function. First of all we want the content divs not to display by opening the page. So let’s hide them.
$('.content').hide();
This will get all the divs with the class content and hide them.
Now let’s set up the functionality when the user clicks on the panel divs.
$('.panel').click(function(){
});
Within this function we will get one of the panel divs and let the next content div in the HTML slide down.
$(this).next('.content').slideDown('slow');
With “this” we mean the panel div that the user clicked. Now when the user clicks on a panel div the next content div will slide down. That’s pretty fine so far. But we wanna achieve that when the user clicks on a panel div and a content div is already open that content div will close. So we have to put another statement in the click function:
$('.content').slideUp('fast');
So now the open content div will slide up and the next content div will slide down. With the two different speeds we’ll get a pretty neat effect, I think.
Here you have the whole jQuery function:
$(function(){
$('.content').hide();
$('.panel').click(function(){
$('.content').slideUp('fast');
$(this).next('.content').slideDown('slow');
});
});
That’s it. Our accordion should work properly. Hope you enjoyed this tutorial and please let me know what you think of it in the comments. Thanx for your attention folks.
Leave a Reply
