New
The effect is commonly known as an ‘accordion’ and it’s usually used to slide up, or down blocks of content to expose new blocks.
The Apple web site is a great demonstration of this effect in action, where the mouse settles on the title of the ’section’ and the associated links are exposed. What makes this effect particularly cool, is that the drawers maintain a fixed height and slide between restricted area.
This tutorial will walk through how to create your own simple plugin, and then replicate the Apple downloads drawers using the very excellent Accordion plugin.
Markup
Since we’re practising unobtrusive JavaScript, the markup will start with headings separating the list items.
There’s two approaches depending on your content. Either to use list elements or definition lists. Our example will use list elements.
<ul class="drawers">
<li class="drawer">
<h2 class="drawer-handle open">Downloads</h2>
<ul>
<!-- list items -->And so on, with as many drawer elements as we want. Note that in this example, the ‘open’ class has only been applied to the first drawer.
Simple jQuery slide effect
In it’s simplest form, the effect is this when the user clicks on the drawer handle:
- Hide all the drawer content elements
- Show the drawer content associated with the current drawer handle
In addition, when the page loads, we should hide all the drawer content, except for our starting point.
This is achieved with the following code:
$(document).ready(function () {
// hide all ULs inside LI.drawer except the first one
$('LI.drawer UL:not(:first)').hide();
// apply the open class
$('LI.drawer UL:first').addClass('open');
$('H2.drawer-handle').click(function () {
// hide the currently visible drawer contents
$('LI.drawer UL:visible').hide();
// remove the open class from the currently open drawer
$('H2.open').removeClass('open');
// show the associated drawer content to 'this' (this is the current H2 element)
// since the drawer content is the next element after the clicked H2, we find
// it and show it using this:
$(this).next().show();
// set a class indicating on the H2 that the drawer is open
$(this).addClass('open');
});
});If you wanted to make better using of jQuery’s chaining the code could be written as this:
$(function () { // same as $(document).ready(function () { })
// assuming we have the open class set on the H2 when the HTML is delivered
$('LI.drawer H2:not(.open)').next().hide();
$('H2.drawer-handle').click(function () {
// find the open drawer, remove the class, move to the UL following it and hide it
$('H2.open').removeClass('open').next().hide();
// add the open class to this H2, move to the next element (the UL) and show it
$(this).addClass('open').next().show();
});
});If you want it to slide, we can easily swap .hide() for .slideUp() and .show() for .slideDown(), as I have done in the working example of the simple slide demo
If you look at the demo, for me, the annoying aspect is that the height changes depending on which drawer you’ve got open. In particular, if you have the first drawer open, and click on the second, the position of the third drawer handle moves up.
That’s where the accordion plugin helps us.
jQuery accordion plugin
Using the same markup as the previous example, if we take Jörn Zaefferer’s Accordion plugin we can match the effect on Apple’s site.
Before we can use the plugin however, there are a few prerequisites: in particular, you must have the dimensions plugin. The best place to get the latest files is the plugin repository for Accordion. Download the zip file (using the link towards the foot of the page) and grab the following files:
- jquery.accordion.js (or the packed versions)
- lib/jquery.js (if you’ve not got the library already)
- lib/jquery.dimensions.js
Again, using our existing markup, we can use the following code to get the plugin working straight away:
<script src="jquery.js" type="text/javascript"></script>
<script src="jquery.dimensions.js" type="text/javascript"></script>
<script src="jquery.accordion.js" type="text/javascript"></script>
<script type="text/javascript">
<!--
$(function () {
$('UL.drawers').accordion({
// the drawer handle
header: 'H2.drawer-handle',
// our selected class
selectedClass: 'open',
// match the Apple slide out effect
event: 'mouseover'
});
});
-->
</script>That’s it! Simple and very easy to use so long as you have all the right files.
See the plugin version of the slide out effect
No related posts.
Demo
If you find this demo doesn't work as expected, it's possibly due to the demo running from within an iframe. Try running the demo in it's own window.
Source Code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title>Slide Demo - Fixed Drawer</title>
<style type="text/css" media="screen">
<!--
BODY { margin: 10px; padding: 0; font: 1em "Trebuchet MS", verdana, arial, sans-serif; font-size: 100%; }
DIV.container { margin: auto; width: 90%; margin-bottom: 10px;}
TEXTAREA { width: 80%;}
FIELDSET { border: 1px solid #ccc; padding: 1em; margin: 0; }
LEGEND { color: #ccc; font-size: 120%; }
INPUT, TEXTAREA { font-family: Arial, verdana; font-size: 125%; padding: 7px; border: 1px solid #999; }
LABEL { display: block; margin-top: 10px; }
IMG { margin: 5px; }
h2 {
margin: 0;
}
.drawers-wrapper {
position: relative;
width: 188px;
}
.drawer {
background:transparent url(http://images.apple.com/downloads/images/sideboxlight_bg20070611.gif) repeat-y scroll 0pt;
color:#76797C;
font-size:11px;
line-height:1.3em;
}
.boxcap {
height:5px;
left:0pt;
position:absolute;
width:100%;
z-index:100;
background:transparent url(http://images.apple.com/downloads/images/sidenav_capbottom.png) no-repeat scroll 0%;
margin-top:-5px;
}
.captop {
background-image:url(http://images.apple.com/downloads/images/box_188captop.png);
bottom:auto;
top:0pt;
margin-top:0;
}
.drawers {
margin-bottom:15px;
color:#76797C;
font-size:11px;
line-height: 18px;
}
.drawers A {
color:#666666;
text-decoration:none;
font-family:"Lucida Grande",Geneva,Arial,Verdana,sans-serif;
font-size-adjust:none;
font-style:normal;
font-variant:normal;
font-weight:normal;
}
.drawer li {
border-bottom:1px solid #E5E5E5;
line-height:16px;
padding:6px 0pt;
}
UL {
list-style: none;
padding: 0;
}
UL.drawers {
margin: 0;
}
.drawer-handle {
background:#939393 url(http://images.apple.com/downloads/images/slider_handlebg188.png) no-repeat scroll 0pt;
color:#333333;
cursor:default;
font-size:12px;
font-weight:normal;
height:25px;
line-height:25px;
margin-bottom:0pt;
text-indent:15px;
width:100%;
}
.drawer-handle.open {
background-color:#72839D;
background-position:-188px 0pt;
color:#FFFFFF;
}
.drawer UL {
padding: 0 12px;
padding-bottom:0pt;
}
.drawer-content UL {
padding-top: 7px;
}
.drawer-content LI A {
display:block;
overflow:hidden;
}
.alldownloads li {
border:0pt none;
line-height:18px;
padding:0pt;
}
-->
</style>
<script src="jquery-1.2.1.js" type="text/javascript"></script>
<script src="jquery.dimensions.js" type="text/javascript"></script>
<script src="jquery.accordion.js" type="text/javascript"></script>
<script type="text/javascript">
<!--
$(function () {
$('ul.drawers').accordion({
header: 'H2.drawer-handle',
selectedClass: 'open',
event: 'mouseover'
});
});
//-->
</script>
</head>
<body id="page">
<h1>Fixed drawer slide out demo (using accordion plugin)</h1>
<p>This example demonstrates the Apple downloads slider/accordion effect using the jQuery Accordion plugin.</p>
<p>Mouse over the headings to reveal the list of available links.</p>
<p><a href="http://jqueryfordesigners.com/slide-out-and-drawer-effect/">Read the article this demonstration relates to</a></p>
<div class="drawers-wrapper">
<div class="boxcap captop"></div>
<ul class="drawers">
<li class="drawer">
<h2 class="drawer-handle open">Downloads</h2>
<ul class="alldownloads">
<li id="sn-downloadsmacosx"><a href="/downloads/macosx/">All Categories</a></li>
<li id="sn-aperture"><a href="/downloads/macosx/aperture/">Aperture</a></li>
<li id="sn-apple"><a href="/downloads/macosx/apple/">Apple</a></li>
<li id="sn-audio"><a href="/downloads/macosx/audio/">Audio</a></li>
<li id="sn-automator"><a href="/downloads/macosx/automator/">Automator Actions</a></li>
<li id="sn-businessfinance"><a href="/downloads/macosx/business_finance/">Business & Finance</a></li>
<li id="sn-calendars"><a href="/downloads/macosx/calendars/">Calendars</a></li>
<li id="sn-developmenttools"><a href="/downloads/macosx/development_tools/">Development Tools</a></li>
<li id="sn-drivers"><a href="/downloads/macosx/drivers/">Drivers</a></li>
<li id="sn-emailchat"><a href="/downloads/macosx/email_chat/">Email & Chat</a></li>
<li id="sn-finalcutstudio"><a href="/downloads/macosx/finalcutstudio/">Final Cut Studio</a></li>
<li id="sn-games"><a href="/downloads/macosx/games/">Games</a></li>
<li id="sn-homelearning"><a href="/downloads/macosx/home_learning/">Home & Learning</a></li>
<li id="sn-iconsscreensavers"><a href="/downloads/macosx/icons_screensavers/">Icons, Screensavers, etc.</a></li>
<li id="sn-imaging3d"><a href="/downloads/macosx/imaging_3d/">Imaging & 3D</a></li>
<li id="sn-internetutilities"><a href="/downloads/macosx/internet_utilities/">Internet Utilities</a></li>
<li id="sn-ipoditunes"><a href="/downloads/macosx/ipod_itunes/">iPod + iTunes</a></li>
<li id="sn-mathscience"><a href="/downloads/macosx/math_science/">Math & Science</a></li>
<li id="sn-networkingsecurity"><a href="/downloads/macosx/networking_security/">Networking & Security</a></li>
<li id="sn-productivitytools"><a href="/downloads/macosx/productivity_tools/">Productivity Tools</a></li>
<li id="sn-spotlight"><a href="/downloads/macosx/spotlight/">Spotlight Plugins</a></li>
<li id="sn-systemdiskutilities"><a href="/downloads/macosx/system_disk_utilities/">System/Disk Utilities</a></li>
<li id="sn-unixopensource"><a href="/downloads/macosx/unix_open_source/">UNIX & Open Source</a></li>
<li id="sn-video"><a href="/downloads/macosx/video/">Video</a></li>
<li id="sn-dashboard"><a href="/downloads/dashboard/" class="bottom">Widgets</a></li>
</ul>
</li>
<li class="drawer">
<h2 class="drawer-handle">Top Downloads</h2>
<ul>
<li><a title="iTunes 7.5" href="http://www.apple.com/itunes/download/">1. iTunes 7.5</a></li>
<li><a title="QuickTime 7.3.1" href="http://www.apple.com/quicktime/download/">2. QuickTime 7.3.1</a></li>
<li><a title="Safari 3 Public Beta" href="http://www.apple.com/safari/download/">3. Safari 3 Public Beta</a></li>
<li><a title="MacPool" href="/downloads/macosx/games/simulation_and_sports/macpool.html">4. MacPool Realistic and easy to play computer simu…</a></li>
<li><a title="Guitar Hero III: Legends of Rock" href="/downloads/macosx/games/demos_updates/guitarheroiiilegendsofrock.html">5. Guitar Hero III: L…</a></li>
<li><a title="Messenger for Mac" href="/downloads/macosx/email_chat/messengerformac.html">6. Messenger for Mac</a></li>
<li><a title="Google Earth" href="/downloads/macosx/home_learning/googleearth.html">7. Google Earth</a></li>
<li><a title="Monopoly" href="/downloads/macosx/games/cards_puzzle/monopoly.html">8. Monopoly</a></li>
<li><a title="Litho System Icons" href="/downloads/macosx/icons_screensavers/lithosystemicons.html">9. Litho System Icons</a></li>
<li><a title="Battlefield 2142" href="/downloads/macosx/games/demos_updates/battlefield2142.html">10. Battlefield 2142</a></li>
<li><a title="More iChat Effects" href="/downloads/macosx/email_chat/moreichateffects.html">11. More iChat Effects</a></li>
<li><a title="Dragster" href="/downloads/macosx/internet_utilities/dragster.html">12. Dragster</a></li>
<li><a title="iSquint" href="/downloads/macosx/ipod_itunes/isquint.html">13. iSquint</a></li>
<li class="last"><a title="US Holiday Calendar" href="/downloads/macosx/calendars/usholidaycalendar.html">14. US Holiday Calendar</a></li>
</ul>
</li>
<li class="drawer last">
<h2 class="drawer-handle">Top Apple Downloads</h2>
<ul>
<li><a title="iTunes 7.5" href="http://www.apple.com/itunes/download/">1. iTunes 7.5</a></li>
<li><a title="QuickTime 7.3.1" href="http://www.apple.com/quicktime/download/">2. QuickTime 7.3.1</a></li>
<li><a title="Safari 3 Public Beta" href="http://www.apple.com/safari/download/">3. Safari 3 Public Beta</a></li>
<li><a title="Mac OS X 10.5.1 Update" href="/downloads/macosx/apple/macosx_updates/macosx1051update.html">4. Mac OS X 10.5.1 Up…</a></li>
<li><a title="Java for Mac OS X 10.4 Release 5" href="/downloads/macosx/apple/macosx_updates/javaformacosx104release5.html">5. Java for Mac OS X …</a></li>
<li><a title="iPod Reset Utility 1.0.2 for Windows" href="/downloads/macosx/apple/ipod_itunes/ipodresetutility102forwindows.html">6. iPod Reset Utility…</a></li>
<li><a title="iPhoto 7.1.1" href="/downloads/macosx/apple/application_updates/iphoto711.html">7. iPhoto 7.1.1</a></li>
<li><a title="Bonjour for Windows" href="/downloads/macosx/apple/windows/bonjourforwindows.html">8. Bonjour for Windows</a></li>
<li><a title="Mac OS X 10.4.11 Combo Update (PPC)" href="/downloads/macosx/apple/macosx_updates/macosx10411comboupdateppc.html">9. Mac OS X 10.4.11 C…<br/>The 10.4.11 Update is recommended for al…</a></li>
<li><a title="Java for Mac OS X 10.4, Release 6" href="/downloads/macosx/apple/macosx_updates/javaformacosx104release6.html">10. Java for Mac OS X …</a></li>
<li><a title="GarageBand 4.1.1" href="/downloads/macosx/apple/application_updates/garageband411.html">11. GarageBand 4.1.1</a></li>
<li><a title="iPod Updater 2006-06-28 for Windows" href="/downloads/macosx/apple/ipod_itunes/ipodupdater20060628forwindows.html">12. iPod Updater 2006-…</a></li>
<li><a title="Security Update 2007-009 1.1 (10.4.11 Universal)" href="/downloads/macosx/apple/security_updates/securityupdate20070091110411universal.html">13. Security Update 20…</a></li>
<li class="last"><a title="Security Update 2007-009 1.1 (10.5.1)" href="/downloads/macosx/apple/security_updates/securityupdate2007009111051.html">14. Security Update 20…</a></li>
</ul>
</li>
</ul>
<div class="boxcap"></div>
</div>
</body>
</html>
Gustav On 22nd September 2008 at 17:09
I had bug in IE6 & IE7 where every header in accordion had 8 px top-margin. Fx, Opera & Chrome didn’t have this or any bugs like you can assume.
I used the accordion script from the jQuery’s UI download page (http://ui.jquery.com/download_builder/)
XHTML looked like this:
For some reason jQuery’s accordion script prepends and appends span tags to header, so it will look like this:
Empty span tags? For what reason? For CSS styling? I searched the jquery-ui-accordion.js script, and classes “ui-accordion-left” and “ui-accordion-right” occured only one time! No reason to add those tags at all.
Simply uncommenting lines in accordion script what added those lines fixed the bug.
Paul Anthony On 13th October 2008 at 14:10
Guys,
I’ve taken this sample - and changed “mouseover” to “click”…It has the undesired effect of disabling links inside the accordion, although it does operate onclick..Any ideas for getting around this one?
mj On 11th November 2008 at 20:11
This works great with the example, as all 3 drawers have the same amount of content in them. However, I have content in one drawer that has about ten times more content. This creates a huge gap in the drawer with less content because it does not “fill up” the drawer. Is there a way to make the drawer only the size of the content that is inside of it?
Sean O'Rear On 29th November 2008 at 02:11
I tried this plugin on a site I am working on but had a problem that I also noticed in your demo. As the sliders are animating, the bottom of the menu gets pulled upwards. When the animation completes - the bottom goes back to its regular position. Most of the time it is barely noticeable (but never non-existant), but during heavy CPU loads the “pull up” effect is quite large. On my site it pulled the bottom menu items up about 25% of the total distance to the top. I found this to be unacceptable for a live website.
I ended up using code I got from this accordion menu tutorial online. I don’t much like the code as you have to have structural markup to utilize it, but it has no “pull-up” effect. Is this something that can be changed or reduced or worked around so that I can use the jQuery accordion.
My thinking is that the plugin animates the old selected menu dive to height: 0px at the same time that it animates the new menu div to height: (X)px. If they aren’t exactly in sync - the height of the div totals during animation is shorter than the space provided - hance “pull-up” effect. Of course I could also be smoking rare herbs ;P
Any thoughts?
tino On 20th December 2008 at 22:12
As Isko was asking, is there a way to make the slide up (=hide) if they are open and you click them? because as the script is written they slide up for a second and slide down again. i tried several things, but i was not able to find a solution :-(
i would be very glad if someone could help, i don’t immagine it is that hard, i just couldn’t make it.
Sukru Boztepe On 23rd December 2008 at 03:12
@mj - Just add the line autoheight: false,
so your function will look like this… P.S. change ‘click’ to ‘mouseover’ if you want.
$(function () { $(’ul.drawers’).accordion({ autoheight: false,
});
youshrin On 5th January 2009 at 08:01
please help how to stop the dansing effect with the slide up and down
sanat On 22nd January 2009 at 16:01
In IE 6.0, Its not showing the same behaviour as it is showing in FF 3.x and opera. colors are changed in bad way and spacing as described by Tyler on 2nd Sept is also disturbed. for FF3.x and Opera, its marvelous !!
niclas On 6th February 2009 at 09:02
@Sukru
thank you so much, exactly what i needed to know
cosinus On 22nd February 2009 at 15:02
Hi, I tried for a few days to have a code “JQuery Accordion” for my menu as it is used in the Apple site. But I still have problems. So I found another nice code in the address: http://berndmatzner.de/jquery/hoveraccordion/index.php I tried to put the code to work on three levels: Menu1 Sub menu 1 Link 1 Instead of: Menu1 Link1 But always failed
Mark On 17th March 2009 at 17:03
Got this working (v1.6 stabdalone before moved to the UI core) but it used v1.2 of Jquery and it no longer works with Jquery1.3+, which is a pain if you do not want the UI.core overhead Any suggestions?
Michael On 23rd April 2009 at 10:04
Hi,
thanks a lot for this code and tutorial. Is it possible that (when you link to the menu) a different subnav is opened?
Can I link to this example menu and can say that the ‘Top Downloads’ should be opened?
Francis Shephard On 28th April 2009 at 09:04
This doesn’t work well in IE 6, there are sorts of visual bugs, which are possibly just CSS related.
Can you make this work correctly in IE6? as anything one implements on their sites needs to work with IE6 due to the amount of users still using it!!
I hate IE6, its junk.
Joshua Heyer On 11th May 2009 at 07:05
Hello,
Thanks for the great explanation. Works great! I had a question about the “open” class. Is there a way to have a list other than the first one be the open list on a page load? I want the first list to be open on the home page, but on a sub page I’d like the second list to be open. Is this possible? Thanks.
Josh
Hari K T On 14th May 2009 at 09:05
Awesome man. A useful one for webdevelopers . Have a great day . Nice to see your blog too :-) . Although I am a server side coder (PHP) , I love to do these type of tricks for UI.
John On 14th May 2009 at 17:05
This code or demo doesn’t work in Firefox or IE.