Having some stress and headache to create a simple Jquery accordion feature for your website project? There are even a lot of tutorial websites online that you can use as a reference but you cannot understand the code used and seems complicated to follow. No worries and I will help you to create one from scratch, simple, easy to follow and understand.
No more further ado, let’s start coding 🙂
Setup the HTML structure
<!DOCTYPE html>
<html lang="en">
<head>
<title>Simple Jquery Accordion</title>
</head>
<body>
<h1>Simple Jquery Accordion</h1>
<div id="simple-accordion">
<ul class="accordion">
<li>
<h2>
<a href="#">Item 1</a>
</h2>
<div class="contents">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</p>
</div>
</li>
<li>
<h2>
<a href="#">Item 2</a>
</h2>
<div class="contents">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</p>
</div>
</li>
<li>
<h2>
<a href="#">Item 3</a>
</h2>
<div class="contents">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</p>
</div>
</li>
</ul>
</div>
</body>
</html>
Open the HTML file on any browser and it will look like this image below without any styling or design.
Add CSS to style the boring HTML file
I will create style.css file and put inside CSS folder. Here’s the code below on how to insert the CSS file inside the CSS folder.
<link rel="stylesheet" type="text/css" href="css/style.css">
Here are the contents of style.css file.
body {
font: 400 14px Arial, Helvetica, sans-serif;
color: #000;
}
h1 {
font: 700 24px Arial, Helvetica, sans-serif;
margin: 0 0 20px 0;
}
#simple-accordion {
width: 100%;
}
#simple-accordion ul.accordion {
margin: 0;
padding: 0;
}
#simple-accordion ul.accordion li {
font: 400 14px Arial, Helvetica, sans-serif;
list-style-type: none;
margin: 0 0 10px 0;
}
#simple-accordion ul.accordion li h2 {
font: 700 16px Arial, Helvetica, sans-serif;
margin: 0;
border: 1px solid #ccc;
}
#simple-accordion ul.accordion li h2 a {
color: #000;
background-color: transparent;
text-decoration: none;
padding: 13px;
display: block;
position: relative;
-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-ms-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
}
#simple-accordion ul.accordion li h2 a:hover {
color: #000;
background-color: #ccc;
text-decoration: none;
}
#simple-accordion ul.accordion li h2 a::after {
content: '+';
position: absolute;
top: 11px;
right: 13px;
}
#simple-accordion ul.accordion li h2 a.active {
color: #fff;
background-color: #000;
text-decoration: none;
}
#simple-accordion ul.accordion li h2 a.active::after {
content: '-';
position: absolute;
top: 11px;
right: 13px;
}
#simple-accordion ul.accordion li .contents {
width: 100%;
padding: 15px;
border-left: 1px solid #ccc;
border-right: 1px solid #ccc;
border-bottom: 1px solid #ccc;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
display: none;
}
#simple-accordion ul.accordion li .contents.active {
width: 100%;
padding: 15px;
border-left: 1px solid #ccc;
border-right: 1px solid #ccc;
border-bottom: 1px solid #ccc;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
display: block;
}
#simple-accordion ul.accordion li .contents p {
line-height: 24px;
margin: 0 0 20px 0;
}
Refresh the HTML file on the browser and it will now have clean accordion design. See image below for reference.
It’s time to add excitement by adding Jquery script
Here’s the code on how to add Jquery script and package to the HTML file.
Add the Jquery package first
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
After adding the Jquery package, add now the accordion.js file inside the js folder.
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="js/accordion.js"></script>
Here are the contents of accordion.js file.
$(document).ready(function(){
var linkTrigger = $('#simple-accordion ul.accordion li h2 a');
linkTrigger.click(function(event) {
$(event.currentTarget).parent('h2').find('a').toggleClass('active');
$(event.currentTarget).parents('li').find('.contents').toggleClass('active');
return false;
});
});
Done!
Check Out The Preview
If you find it difficult to follow this tutorial, feel free to contact me and I will be happy to assist you. I hope you find this tutorial informative, interesting and useful to your website projects. Thank you.