If you want to download the source code then click here
Hello friends, how are you, I hope you guys will be very well. Friends, you must have seen accordion somewhere because in 90% of the websites people use accordion to work the height of their layout and to make their content look very good. And most of the people use more in the section with FAQ. You must have used it at some point in time, when you click on the panel, its content is shown below and when you click on the second panel, the content of the first one gets hidden, and in some websites the content of all the panels shows. Even if he lives, he depends on functionality. So I am going to do both the functionality here so that you can understand the people better. I have already made its video, if you want to see it then you can go to learndesign youtube channel and watch it.
First of all, I will talk about what you will need, then for this, you will only need the link of jQuery because I have used the functions of jquery here. And you have to add the link of jQuery at the end of the body tag.
<!-- JQUERY LINK -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>Now I am talking about HTML structure, so in this, you have to create a div of an <div class=”accordion”></div>class. Inside that, a div of <div class=”accordion_item”></div> class has to be created. Which will be your accordion. Then inside it a div named <div class=”accordion_title”></div> class has to be created. (You can also name it panel). In which the title of your panel and the icon of the arrow will be there. After that, a div named accordion_desc class has to be created. (You can also name it accordion body.) Whatever our description/detail is inside it will come.
Here the div named is used to center the content. If you want to remove it, you can. You can adjust accordingly.
<main>
<div class="accordion">
<div class="accordion_item">
<div class="accordion_title">
<h5>What does accordion do?</h5>
<div class="arrow"><img src="icon_angle.svg" alt=""></div>
</div>
<div class="accordion_desc">
<p>Euismod justo conubia sagittis tempus volutpat lobortis nunc pretium ligula bibendum. Nullam etiam neque massa habitasse mus sapien a sociosqu non dui. Congue auctor vehicula leo aptent aenean ridiculus augue. Aliquam lectus interdum maximus auctor euismod. Faucibus fusce neque erat ex auctor mauris hac facilisis.</p>
<p>Euismod justo conubia sagittis tempus volutpat lobortis nunc</p>
</div>
</div>
<div class="accordion_item">
<div class="accordion_title">
<h5>What is accordion item?</h5>
<div class="arrow"><img src="icon_angle.svg" alt=""></div>
</div>
<div class="accordion_desc">
<p>Euismod justo conubia sagittis tempus volutpat lobortis nunc pretium ligula bibendum. Nullam etiam neque massa habitasse mus sapien a sociosqu non dui. Congue auctor vehicula leo aptent aenean ridiculus augue. Aliquam lectus interdum maximus auctor euismod. Faucibus fusce neque erat ex auctor mauris hac facilisis.</p>
<p>Euismod justo conubia sagittis tempus volutpat lobortis nunc</p>
</div>
</div>
<div class="accordion_item">
<div class="accordion_title">
<h5>What is an accordion in HTML?</h5>
<div class="arrow"><img src="icon_angle.svg" alt=""></div>
</div>
<div class="accordion_desc">
<p>Euismod justo conubia sagittis tempus volutpat lobortis nunc pretium ligula bibendum. Nullam etiam neque massa habitasse mus sapien a sociosqu non dui. Congue auctor vehicula leo aptent aenean ridiculus augue. Aliquam lectus interdum maximus auctor euismod. Faucibus fusce neque erat ex auctor mauris hac facilisis.</p>
<p>Euismod justo conubia sagittis tempus volutpat lobortis nunc</p>
</div>
</div>
<div class="accordion_item">
<div class="accordion_title">
<h5>How do you describe an accordion?</h5>
<div class="arrow"><img src="icon_angle.svg" alt=""></div>
</div>
<div class="accordion_desc">
<p>Euismod justo conubia sagittis tempus volutpat lobortis nunc pretium ligula bibendum. Nullam etiam neque massa habitasse mus sapien a sociosqu non dui. Congue auctor vehicula leo aptent aenean ridiculus augue. Aliquam lectus interdum maximus auctor euismod. Faucibus fusce neque erat ex auctor mauris hac facilisis.</p>
<p>Euismod justo conubia sagittis tempus volutpat lobortis nunc</p>
</div>
</div>
</div>
</main>You also might like this video
- Scroll To Top Button (Back To Top) Using Simple JAVASCRIPT | Click to Scroll Top | CSS Smooth Scroll
- Profile Card UI Design Using HTML & CSS | CSS Flip Hover Effect & Dark Light Mode | Figma UI Design
- Show hide text on click using HTML, CSS & JQUERY | Expand & Collapse Text | Jquery Toggle Class
- Menu Hover Effect | Infinite Wavy Border Animation Using Only HTML, CSS ANIMATION
- Testimonial Carousel With Slick Carousel, Review Slider | HTML,CSS & JQUERY TUTORIAL
Now I am talking about CSS. In this, I have written the CSS style internally i.e. in the index.html file itself, the style is written in the style tag inside the head. Set the class named accordion to width: 800px; margin: 0 auto; Given so that it remains in the center. After that set accordion_item to margin-bottom: 15px; It is given so that there is some space in the middle and it looks good. After that, accordion_title and accordion_title .arrow, and accordion_desc have been written in CSS as per requirement you can see in the code below. What is important after that is the style of accordion_item.active arrow This style will be used when the class of active is added to accordion_item, and then the arrow will flip. We will dynamically add class to it with the help of jquery. I have given the code of css below, you can copy it.
body{
font-family: 'Inter', sans-serif;
background-color: #f1f4f8;
color: #4a4a4a;
overflow-x: hidden;
}
main{
padding-top: 100px;
min-height: 1000px;
}
h5{
font-size: 18px;
font-weight: 600;
}
p{
font-size: 16px;
line-height: 28px;
font-weight: 500;
color: #696868;
margin-bottom: 10px;
}
.accordion{
width: 800px;
margin: 0 auto;
}
.accordion_item{
margin-bottom: 15px;
}
.accordion_title{
position: relative;
padding: 24px 80px 24px 30px;
background-color: #fff;
border-radius: 16px;
box-shadow: 0 4px 20px rgba(0,0,0,0.03);
cursor: pointer;
}
.accordion_title .arrow{
position: absolute;
right: 30px;
top: 45%;
transition: all ease 0.6s 0.5s;
}
.accordion_desc{
padding: 30px;
background-color: #fff;
border-radius: 0 0 16px 16px;
box-shadow: 0 4px 20px rgba(0,0,0,0.03);
border-top: 3px solid rgba(0,0,0,0.07);
}
.accordion_item.active .arrow{
transform: scale(-1) translateY(5px);
}
.accordion_item.active .accordion_title{
border-radius: 16px 16px 0 0;
}Now I am talking about jquery, before using jquery, you need to attach its link, which I had already told. Then inside the script tag, you can write the code of jquery, if you are using it internally, and if you want to create a separate file of the code of jquery, then you do not need to write the script in it.
So in jquery, i have written $(document).ready(function() so that when your document is loaded after jquery will start working. First of all, I have hidden accordion_desc inside it. Because I need to use anyone in starting Do not keep the accordion open(expand). After this, we have used the onClick function in which the accordion_title is targeted. When we click on accordion_title, then we will have added the functionality inside it, that will work. So inside it, I have added 4 functionality. Have used the first slideToggle(when you click on accordion_title it will expand and collapse) second toggleClass(when you click on accordion_title then the active class will be add and remove). The third slideUp(at a time the same accordion will be open when you open the second accordion) So the first accordion will be closed. Fourth removeClass (When you open the second accordion, the active class will be removed from the first accordion, that is, your arrow will come to the default position.) I have given its code below. hey you good to see him You can understand
$(document).ready(function(){
// default state
$(".accordion_desc").hide();
$(".accordion_title").on('click', function(){
$(this).next().slideToggle('slow');
$(this).parent().toggleClass('active');
$(".accordion_title").not(this).next().slideUp('slow');
$(".accordion_title").not(this).parent().removeClass('active');
});
});I know that there are many such plugins too and if you use bootstrap or any other framework then accordion would have been given in it too but I have shown here by making a custom accordion. And I have made this only for your knowledge. If you want to make an accordion without a plugin, then how will you make it, that’s why I have also made this article and video and you can watch it by visiting the LearnDesign YouTube channel. If you like my work then please share it.
