Update: This article was originally published in 2011. As you know, the web is constantly changing, which means some of the advice on this page may become out of date. For the latest digital marketing insights from the RocketMill team, please visit our main blog page.

Often the most simplest concepts can derail a web designer in their tracks. One that I spent far too long constructing was this simple and cheerful truncating accordian box, with a rotating arrow. We’ve all seen them around, but there is nothing (that I came across anyway) out there specifically made for it. UNTIL NOW. *cough* Sorry, got a bit excited there…

Example

View Demo | Download

The accordian works within the JQuery click, slideUp and slideDown functions. The slideDown function is called when the title is clicked and content box is hidden, and vice-versa when the content box is visible.

Pretty simple so far.

With the arrow, we use the addClass and removeClass functions to alter the background image position in css of the title. So although the arrow looks like its rotating, it is in fact the background-image position shifting vertically. Clever!? Not really, but it works. And I like things that work. A lot.

Here’s the jQuery:

$(document).ready(function() {

$('.title').click(function() {

$('.title').removeClass('on');

$('.content').slideUp('normal');

if($(this).next().is(':hidden') == true) {

$(this).addClass('on');

$(this).next().slideDown('normal');
}

});

});

And the CSS:

.title {
padding-left:15px;
height:17px;
background: url(images/arrow-toggle.png) 0 3px no-repeat !important;
cursor:pointer;
margin-bottom:10px;
color:#104675;

}

.on {
background: url(images/arrow-toggle.png) 0 -12px no-repeat !important;
}

.content {
display:none;
background-color:#f4f2f3;
border: #CCCCCC 1px solid;
padding: 10px;
margin-bottom:10px;
}

And lastly the HTML:

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="css/dropdownwitharrows.css" type="text/css" media="screen" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" type="text/javascript"></script>
<script src="js/dropdownwitharrows.js" type="text/javascript"></script>
</head>

<body>
<div class="title"><h1>Header One</h1></div>
<div class="content"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam turpis urna, tristique quis convallis nec, dapibus sed velit. Aenean sapien eros, luctus a aliquet ut, consectetur eget nunc. Sed ut odio mollis mauris pulvinar scelerisque. Etiam semper dolor at ante venenatis euismod. Ut tempus massa vel nisl ullamcorper interdum. Mauris pretium venenatis tellus ut lacinia. Quisque cursus dapibus tellus, ac scelerisque lacus placerat sed. Proin tristique dignissim faucibus. Proin vestibulum ligula non urna varius volutpat. Etiam aliquam malesuada aliquam. Donec commodo tortor a erat luctus lobortis vitae ut augue. Integer eleifend ullamcorper tempus.</p></div>
</body>

And that’s all there is to it. Happy dropdown-ing! (Hasn’t really got a ring to it.)

View Demo | Download