Build your own YOODrawer like accordion widget using jQuery
Written by Anthony Karassavov on Thu, Aug 26th 2010, 23:52 in CSS, Design and Javascript
Well, it's been quite a while since I last wrote anything here. I was busy working and taking my new blog design off the ground (hope you like it *zing*). But enough already, let's see what I have to share 
I like YooTheme, hell, I love their approach to graphics and web design. Without any hesitation I can say that they are offering some of the best templates and extensions on the Joomla theme market. Today I want to focus your attention on one of their components (YOOTools) - the YOODrawer.
In this post, I will show you how to set up your own similar widget to this YOOTool using the wonderful jQuery framework. The people who suffer from patience deficit disorder can jump straight to the demo and see what we will be building.
I take it that you have already checked the demo and/or the original yoodrawer and you are eager to open your editor and start writing code. But before we do that, we are going to need some sleek graphics, so we can build the thing. Luckily, I have already done that for you, so go ahead and download this archive, extract it and check the graphix out. You're done? Ok let's move on.
Since we are using jQuery for this, it's obvious that you're gonna need the library, so if you haven't downloaded it yet - DON'T! See why you should use Google's CDN for those files. Some of you might have noticed that the original widget has a nice easing effect. To achieve something similar you have to get the jQuery easing plug-in (included in the archive as well).
Your CSS file should look like this. Of course, you can play with widths, heights and backgrounds once you get the hang of it:
#header {
position: relative;
z-index: 100;
width: 170px;
height: 31px;
line-height: 20px;
padding: 0 0 0 10px;
color: #fff;
font-weight: bold;
background: url(header.png) 0 0 no-repeat;
}
#accordion-holder {
margin-top: -9px;
width: 180px;
height: 555px;
overflow: hidden;
position: relative;
}
.accordion {
width: 150px;
height: 230px;
padding: 10px 15px;
position: absolute;
overflow: hidden;
left: 0;
font-size: 10px;
background: url(box.png) 0 0 no-repeat;
}
#a-1 { z-index: 53; top: 0; }
#a-2 { z-index: 52; }
#a-3 { z-index: 51; }
#a-4 { z-index: 50; }
.accordion h3 { font-size: 14px; margin: 15px 0 0 0; }
.accordion p { line-height: 12px; margin: 5px 0; }
.accordion img { display: block; margin: 5px auto 0 auto;}
This is not the most optimized markup in the world and you can surely omit some of ids and classes, but be sure to follow a similar structure:
<div id="wrap">
<div id="header">YooDrawer-like widget</div>
<div id="accordion-holder">
<div class="accordion active" id="a-1">
<img src="icon1.png" alt="" />
<h3>This is some fancy title</h3>
<p>Lorem ipsum dolor sit amet...</p>
<a href="#" class="black-arrow">Read more</a>
</div>
<div class="accordion" id="a-2">
<img src="icon2.png" alt="" />
<h3>Another cool title</h3>
<p>Lorem ipsum dolor sit amet...</p>
<a href="#" class="white-arrow">Click here</a>
</div>
<div class="accordion" id="a-3">
<img src="icon3.png" alt="" />
<h3>Impress your customers</h3>
<p>Lorem ipsum dolor sit amet...</p>
<a href="#" class="white-arrow">Dummy link</a>
</div>
<div class="accordion" id="a-4">
<img src="icon4.png" alt="" />
<h3>With this cool widget</h3>
<p>Lorem ipsum dolor sit amet...</p>
<a href="http://q2interactive.net" class="white-arrow">by q2interactive.net</a>
</div>
</div>
</div>
And finally you need the javascript code, which glues everything together:
$(document).ready(function(){
//Initiate accordion animation on load
$('#a-2').animate({
top: "+=91px"
},500);
$('#a-3').animate({
top: "+=182px"
},600);
$('#a-4').animate({
top: "+=273px"
},700);
// Let jQuery work its Voodoo in 20 lines :P
$('#accordion-holder').children().mouseover(function(){
if (!$(this).hasClass('active')) {
targeted = parseInt($(this).attr('id').substr(2));
currentlyActive = parseInt($('#accordion-holder .active').attr('id').substr(2));
if (targeted > currentlyActive) {
for (i=currentlyActive;i<targeted;i++) {
$('#a-'+i).animate({
top: "-=147px"
},800,"easeOutExpo");
}
} else {
for (i=targeted;i<currentlyActive;i++) {
$('#a-'+i).animate({
top: "+=147px"
},800,"easeOutExpo");
}
}
$('#accordion-holder').children().removeClass("active");
$(this).addClass("active");
}
});
});
I hope you've enjoyed the article. Leave your comments and thoughts below :)
@Bo Dudek Thanks for pointing that feature out. I dug a little and using this very lightweight cookie plugin for jQuery, I managed to achieve the desired effect in just a few additional lines. Do not forget to include the cookie plugin, or else it won't work:
// Set the cookie options
var opts = { path: '/', expires: 10 };
// Added the effect as a callback to the initiating animation of the last banner
$('#a-4').animate({
top: "+=273px"
},700,null,function(){
if ($.cookie('accordion-active') && $.cookie('accordion-active')!="1") {
s = parseInt($.cookie('accordion-active'));
$('#accordion-holder').children().removeClass("active");
$('#a-'+s).addClass("active");
for(z=1;z<s;z++) {
$('#a-'+z).animate({
top: "-=147px"
},800,"easeOutExpo");
}
}
});
And then after this line:
currentlyActive = parseInt($('#accordion-holder .active').attr('id').substr(2));
add this one:
$.cookie('accordion-active',targeted,opts);
I uploaded an updated version of the archive, so you can check the whole code for yourself.
Hi Toni :)
Great one! Though, in my opinion you should put some effort in letting jQuery save the hovered part of the accordion in a cookie, so you can expand the same part on page-reload or page-change :)
Cheers mate
/ Bo Dudek
Reply
tell me what you think
If you liked the article and want to contribute to it, please feel free to leave your comment. HTML tags are not allowed, but you can use the following BBCode to enhance your message: [url] [quote] [code] [b] [i] [u] [color].
So who is anthony anyway?
i am anthony - an all-around web developer with a degree in business. I like to code functional websites with beautiful interfaces. PHP, javascript and espresso is a powerful combination.
Lately
Your voice
The usual stuff
Thoughts and notes from a web developer