Accordion menu’s have been used for website navigation for quite some time. An accordion is a vertically or horizontally stacked list of items, such as labels, descriptions and thumbnails. Each item can be “expanded” or “stretched” to reveal the content associated with that item.
Using pure CSS3 in an Accordion will not work on all browsers as some of the newest CSS3 selector are not supported in the oldest browsers. Using jQuery is the best way to go.
In this tutorial we will show you how to build a flat style accordion that will reveal the description of each item.
Let’s get started:
Resources you need to complete this tutorial:
- jQuery library
- Font Awesome
- Basic knowledge in CSS3 and jQuery
- Time and Patience
What we are going to build
Getting Started:
Before diving in to our Markup, first we need to add some codes on our head section. These include the stylesheets, jQuery library, font-awesome links and some other codes to make our codes work on an older browser.
<!DOCTYPE html> <!--[if IE 8]> <html lang="en" class="ie8"> <![endif]--> <!--[if !IE]><!--> <html lang="en"> <!--<![endif]--> <head> <meta charset="utf-8"> <title>Flat Style Accordion Using CSS3 and jQuery</title> <meta name="description" content="A simple accordion using CSS3 and jQUery"> <meta name="author" content="Sam Norton"> <!-- Stylesheets --> <link rel="stylesheet" href="style.css"> <link href='http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,400' rel='stylesheet' type='text/css'> <link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet"> <!--[if lt IE 9]> <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script> <![endif]--> </head>
The Markup:
The Markup will have the HTML5 dt (which contains a title/name of a description list) and dd (which contains the description of the dt tag) and then we’ll wrap everything in a dl tag. Inside the dt tag, we will also add the font-awesome tags. You can visit this page for more information on how to get your preferred icon.
<dl> <dt> <i class="fa fa-users"></i> About Us</dt> <dd>We are the best doctors and nurses. Really we are the best among the rest! We are the best! </dd> <dt> <i class="fa fa-briefcase"></i> Profile</dt> <dd>If you are looking for profile you might be wondering if you don't see any profile here.</dd> <dt><i class="fa fa-map-marker"></i> Landmarks</dt> <dd>You can check our landmark by checking google maps at Kansas City, Missouri! </dd> <dt><i class="fa fa-weixin"></i> Testimonials</dt> <dd>This company is great! They have cool stuffs inside! The nurses are cute too! </dd> <dt><i class="fa fa-envelope"></i> Contact Us</dt> <dd>You can contact us here: <br/> 634 Woodhaven Ct Clarksville, TN 37042-3918 </dd> </dl>
The CSS
For our CSS, first let’s define the body size and then will add some details on it such as the color, font-size and font-face.
body {
width: 330px;
margin: 100px auto;
text-align: center;
font-family: 'Open Sans Light';
background: #555555;
}
Next, let’s add some styles to our dd and dt tags. We will add a light green color to our dd tag make it obvious that it is the title or the name of the list. And then for our dt tag, we will just put a plain color white background to it:
dd {
margin: 0;
padding: 20px 0;
font-size: 14px;
background: #fbfbfb;
padding: 10px 50px;
}
dt {
cursor: pointer;
font-size : 18px;
line-height: 23px;
background: #2ebb98;
border-bottom: 1px solid #c5c5c5;
border-top: 1px solid white;
font-weight: 400;
color: #fff;
text-align: left;
padding: 10px 14px;
}
Then, let’s target the dt first child and 2nd to the last child and remove the border top and border-bottom.
dt:first-child { border-top: none; }
dt:nth-last-child(2) { border-bottom: none; }
Finally, we will add the class hide. We will manipulate this class later on our jQuery code to hide and show our dd tags.
.hide { display: none;}
jQuery Review:
Just a little review in case you are new to jQuery. In order for our jQuery code to work you will need to include the main jQuery script from somewhere. There are lots of ways to do this but for this tutorial we’ll put it before the ending of the tag.
The jQuery
We are now ready to dive into the jQuery. We will add an anonymous function and target the dt tag to show and hide it on click event. Notice that the duration is 300 for slideDown and slideUp method, this means that it will slide in a speed of 3 milliseconds. Copy and paste the following code under the jQuery library link just before the ending of the
</body>
tag.
(function() {
$('dd').filter(':nth-child(n+4)').addClass('hide');
$('dl').on('click', 'dt', function() {
$(this)
.next()
.slideDown(300)
.siblings('dd')
.slideUp(300);
});
})();
Conclusion:
That’s it! We hope you have enjoyed it and found it useful for your upcoming project. Accordion adds value to your website as this adds dynamic properties to the parts of a sites instead of a plain old method of displaying an information list.
