Today we are going to create a vertical accordion from scratch, using jQuery of course! We will have few lines of code that would be easy to understand. I used this code when I was asked to create an accordion for a website's headlines.
![jquery accordion tutorial]( "jquery accordion tutorial")
So in this example code, we will have:
- Three headlines, one headline is opened on load by default.
- When a use clicks on a headline with hidden content, it will slide down the hidden content to be shown and close (slide up) the previously opened headline.
CSS - You may do your tweaks to design your own accordion (change colors, add images, etc.) but make sure the main style are the following.
body {
font-family:Georgia, serif;
}
.headlineTitle {
font-weight:bold;
padding:5px0;
}
.item {
border:thinsolid#c0c0c0;;
margin:000.5em0;
}
.itemContents {
display:none;
margin:.05em000;
padding:10px;
}
.itemTitle {
background-color:#FAEBD7;
cursor:pointer;
font-weight:bold;
padding:10px;
}
.openedContent {
display:block;
}
HTML - Our html scructure would look like this. This could be generated multiple times by your server side script like PHP (reading records from a database), but in this example, we are using static HTML.
<divclass="itemsContainer">
<divclass="item">
<divclass="itemTitle opened">First Headline</div>
<divclass="itemContents openedContent">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras eu elit dui, sed dapibus ante. Donec fermentum, metus et convallis vulputate, justo mauris viverra mauris, ut dictum nisi eros sit amet ante. Suspendisse velit erat, iaculis a feugiat sed, pretium eu magna. Praesent pharetra nisi eu odio bibendum dapibus. Nullam sollicitudin auctor vulputate. Fusce ultrices molestie justo et feugiat. Aenean elit tortor, scelerisque quis ultricies in, pharetra quis quam.
</div>
</div>
<divclass="item"></div>
<divclass="itemTitle">Second Headline</div>
<divclass="itemContents">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras eu elit dui, sed dapibus ante. Donec fermentum, metus et convallis vulputate, justo mauris viverra mauris, ut dictum nisi eros sit amet ante. Suspendisse velit erat, iaculis a feugiat sed, pretium eu magna. Praesent pharetra nisi eu odio bibendum dapibus. Nullam sollicitudin auctor vulputate. Fusce ultrices molestie justo et feugiat. Aenean elit tortor, scelerisque quis ultricies in, pharetra quis quam.
</div>
</div>
jQuery - makes our accordion work with few lines of codes.
$('.itemTitle').click(function () {
// show the content only if it is hidden
if ($(this).closest('.item').find('.itemContents').is(":hidden")) {
//open the content
$(this).closest('.item').find('.itemContents').slideDown("fast");
//close previously opened content
$(this).closest('.itemsContainer').find('.opened').closest('.item').find('.itemContents').slideUp("fast");
// remove the "opened" class from previously opened content
$(this).closest('.itemsContainer').find('.opened').removeClass('opened');
//add class to mark the clicked item is opened
$(this).addClass("opened");
}
});
Complete Page Code - Enjoy!
<!DOCTYPE HTML>
<html>
<head>
<title>jQuery Accordion</title>
<style>
body {
font-family:Georgia, serif;
}
.headlineTitle {
font-weight:bold;
padding:5px 0;
}
.item {
border:thin solid #c0c0c0;;
margin:0 0 0.5em 0;
}
.itemContents {
display:none;
margin:.05em 0 0 0;
padding:10px;
}
.itemTitle {
background-color:#FAEBD7;
cursor:pointer;
font-weight:bold;
padding:10px;
}
.openedContent {
display:block;
}
</style>
</head>
<body>
<divclass="itemsContainer">
<divclass="item">
<divclass="itemTitle opened">First Headline</div>
<divclass="itemContents openedContent">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras eu elit dui, sed dapibus ante. Donec fermentum, metus et convallis vulputate, justo mauris viverra mauris, ut dictum nisi eros sit amet ante. Suspendisse velit erat, iaculis a feugiat sed, pretium eu magna. Praesent pharetra nisi eu odio bibendum dapibus. Nullam sollicitudin auctor vulputate. Fusce ultrices molestie justo et feugiat. Aenean elit tortor, scelerisque quis ultricies in, pharetra quis quam.
</div>
</div>
<divclass="item">
<divclass="itemTitle">Second Headline</div>
<divclass="itemContents">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras eu elit dui, sed dapibus ante. Donec fermentum, metus et convallis vulputate, justo mauris viverra mauris, ut dictum nisi eros sit amet ante. Suspendisse velit erat, iaculis a feugiat sed, pretium eu magna. Praesent pharetra nisi eu odio bibendum dapibus. Nullam sollicitudin auctor vulputate. Fusce ultrices molestie justo et feugiat. Aenean elit tortor, scelerisque quis ultricies in, pharetra quis quam.
</div>
</div>
<divclass="item">
<divclass="itemTitle">Third Headline</div>
<divclass="itemContents">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras eu elit dui, sed dapibus ante. Donec fermentum, metus et convallis vulputate, justo mauris viverra mauris, ut dictum nisi eros sit amet ante. Suspendisse velit erat, iaculis a feugiat sed, pretium eu magna. Praesent pharetra nisi eu odio bibendum dapibus. Nullam sollicitudin auctor vulputate. Fusce ultrices molestie justo et feugiat. Aenean elit tortor, scelerisque quis ultricies in, pharetra quis quam.
</div>
</div>
</div>
<scripttype='text/javascript'src="js/jquery-1.9.1.min.js"></script>
<scripttype='text/javascript'>
$(document).ready(function () {
$('.itemTitle').click(function () {
// show the content only if it is hidden
if ($(this).closest('.item').find('.itemContents').is(":hidden")) {
//open the content
$(this).closest('.item').find('.itemContents').slideDown("fast");
//close previously opened content
$(this).closest('.itemsContainer').find('.opened').closest('.item').find('.itemContents').slideUp("fast");
// remove the "opened" class from previously opened content
$(this).closest('.itemsContainer').find('.opened').removeClass('opened');
//add class to mark the clicked item is opened
$(this).addClass("opened");
}
});
});
</script>
</body>
</html>