hello everyone and welcome back to a new tutorial, in this small tutorial we will see how to create an amazing Accordion effect using only HTML, CSS and a JQUERY.
so before I give you the source code, what is an accordion effect?
an accordion effect allows us to minimalize our web page and let the user display the section that he wants. in addition to its cool animation, it allows you to organize your web page better and gives you more space to add some widgets.
now let's see together the full source code of this cool project
now let's see together the source code:
HTML code :
<!DOCTYPE HTML>
<html>
<head>
<link rel="stylesheet" href="main.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<div class="container">
<div class="accordion">
<div class="title">
<h1>this is a simple title</h1>
<p>+</p>
</div>
<div class="content">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris maximus aliquam purus commodo consectetur. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Ut nec nibh ut sapien ultricies hendrerit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec rhoncus vestibulum mollis. Curabitur porttitor fermentum ipsum, a congue metus mattis sit amet. In et pretium lacus.
</p>
</div>
</div>
<div class="accordion">
<div class="title">
<h1>this is a simple title</h1>
<p>+</p>
</div>
<div class="content">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris maximus aliquam purus commodo consectetur. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Ut nec nibh ut sapien ultricies hendrerit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec rhoncus vestibulum mollis. Curabitur porttitor fermentum ipsum, a congue metus mattis sit amet. In et pretium lacus.
</p>
</div>
</div>
<div class="accordion">
<div class="title">
<h1>this is a simple title</h1>
<p>+</p>
</div>
<div class="content">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris maximus aliquam purus commodo consectetur. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Ut nec nibh ut sapien ultricies hendrerit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec rhoncus vestibulum mollis. Curabitur porttitor fermentum ipsum, a congue metus mattis sit amet. In et pretium lacus.
</p>
</div>
</div>
</div>
<script>
$(document).ready(function(){
$('.title').on('click',function(){
$(this).next($('.content')).slideToggle();
});
});
</script>
</body>
</html>
CSS part:
*{
margin: 0;
padding: 0;
outline: 0;
font-family: sans-serif;
}
.container{
width: 50%;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
}
.title{
background-color: #c9454c;
display: flex;
flex-direction: row;
color: #fafafa;
}
.title h1{
width: calc(100% - 10px);
padding: 10px;
}
.title p{
width: 10px;
height: 10px;
padding: 20px;
}
.content{
background-color: #ffc8cb;
padding: 10px;
color: #212121;
display: none;
}
i hope that you liked this small tutorial, if it's the case please share it to your friends and don't forget to tell us in the comment section what you think about it thank you
Accordion effect using HTML, CSS and JQUERY
Reviewed by Medics
on
April 06, 2019
Rating:
Reviewed by Medics
on
April 06, 2019
Rating:
No comments: