HomeAccordionResponsive Animated CSS Accordion using HTML CSS and JS

Responsive Animated CSS Accordion using HTML CSS and JS

css accordion

Responsive CSS Accordion using HTML

To create this post-project (responsive and animated CSS Accordion). First of all, we need to create three coding document files. The first is HTML File, the second is CSS File for styling and the third one is JS File for adding animation. After creating these coding files just paste the following codes into your files. An css accordion menu is a vertically managed list of headings or items and that can be clicked to hide or unhide important website content.

The css Accordion menu is mostly used while creating a FAQ section on any website. an accordion menu can have different functions like animation, hover effects, color animation, etc. mostly, an css accordion has multiple headings or tabs and we have to click on those headings or tabs to see the answers to most asked questions or more headings. here you are thinking that what is accordion heading, Look at the accordion image of this post that I have given on top, there is a total of five questions, those are called accordion menu headings. 

The css Accordion menu mostly managed important text articles and has show-hide features. It takes small space but displays only questions to the user, if the user wants to see the answer to the question then they need to open it by simply hover on it or click on that accordion heading or question.

Responsive CSS Accordion with (source code)

First, create an HTML(Hypertext Markup Language) file with the name of index.html and add the given HTML code to your HTML file. Must remember that you need to create a file document with a .html extension.

Second, create a CSS(Cascading Style Sheet) file for styling with the name of style.css and paste the below code in your CSS file. Remember, you have to create a file with extension .css.

third, create a working JS file with the name of script.js file name can be different but the file extension must be .js. and paste the all necessary js given codes into your JS file. 

First of all add given important js script File in Head Section of html file.

HTML:

<script rel="stylesheet" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>     
<div class="wrapper">
  <div class="accordion_wrap accordion_1">
    <div class="accordion_header">
     Accordion 1
    </div>
    <div class="accordion_body">
      <p>Praesent neque metus, egestas eu pharetra at, auctor in libero. Etiam tincidunt hendrerit blandit. Nullam tempus odio nec lobortis semper. Aliquam tempor mauris sagittis orci semper, eget rhoncus lorem venenatis.</p>
    </div>
  </div>
  <div class="accordion_wrap accordion_2">
    <div class="accordion_header">
      Accordion 2
    </div>
    <div class="accordion_body">
       <p>Etiam eu felis ac eros auctor facilisis. Integer id auctor massa, in semper tellus. Proin euismod in quam vitae volutpat. Praesent ornare, ante sed ultricies luctus, velit leo volutpat est, eu mattis urna justo eget metus. Curabitur quis dui sapien.</p>
    </div>
  </div>
  <div class="accordion_wrap accordion_3">
    <div class="accordion_header">
      Accordion 3
    </div>
    <div class="accordion_body">
      <p>Vivamus ultricies turpis ex, quis bibendum eros volutpat sed. Mauris ornare commodo purus, sed dictum dui placerat vitae. Etiam lobortis sed libero ac fermentum. Sed mattis fringilla ex quis sollicitudin. Maecenas urna mi, vehicula sit amet lobortis eget, ullamcorper ut nunc. Mauris mollis neque urna, sed maximus sem luctus eu. Donec posuere at metus non cursus.</p>
    </div>
  </div>
  <div class="accordion_wrap accordion_4">
    <div class="accordion_header">
      Accordion 4
    </div>
    <div class="accordion_body">
      <p>Donec egestas, lacus sed blandit viverra, massa odio mattis erat, placerat semper leo lacus nec leo. Nulla facilisi. Phasellus id enim vulputate, varius mi in, feugiat magna.Vestibulum vel sagittis justo. Proin hendrerit dolor a lectus tempus consectetur.</p>
    </div>
  </div>
  <div class="accordion_wrap accordion_5">
    <div class="accordion_header">
      Accordion 5
    </div>
    <div class="accordion_body">
       <p>Sed egestas molestie lectus, condimentum condimentum lectus maximus non. Fusce sit amet mauris pulvinar, ornare arcu et, dignissim tortor. Phasellus mollis magna vel egestas sodales. Nullam pharetra bibendum pulvinar. Proin sodales gravida auctor. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    </div>
  </div>
</div>

CSS:

      @import url('https://fonts.googleapis.com/
css?family=Muli:400,700&display=swap');

*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Muli', sans-serif;
}

body{
  background: #8F3CE7;
}

.wrapper{
  width: 500px;
  margin: 80px auto 0;
}

.wrapper .accordion_wrap .accordion_header{
  width: 100%;
  height: 50px;
  background: #fff;
  padding: 15px;
  color: #7432BA;
  font-weight: 700;
  border-bottom: 2px solid #7432BA;
  position: relative;
  cursor: pointer;
}

.wrapper .accordion_wrap:first-child .accordion_header{
  border-top-left-radius: 3px;
  border-top-right-radius: 3px;
}

.wrapper .accordion_wrap:last-child .accordion_header{
  border-bottom: 2px solid transparent;
  border-bottom-left-radius: 3px;
  border-bottom-right-radius: 3px;
}

.wrapper .accordion_wrap:last-child .accordion_header:hover{
  border-bottom: 2px solid transparent;
}

.wrapper .accordion_wrap .accordion_header:before,
.wrapper .accordion_wrap .accordion_header:after{
  content: "";
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 15px;
  width: 20px;
  height: 2px;
  background: #7432BA;
}

.wrapper .accordion_wrap .accordion_header:hover{
  color: #7432BA;
  border-color: #7432BA;
}

.wrapper .accordion_wrap .accordion_header:hover:before,
.wrapper .accordion_wrap .accordion_header:hover:after{
  background: #7432BA;
}

.wrapper .accordion_wrap .accordion_header:after{
  transform: rotate(-90deg);
  transition: all 0.5s ease;
}

.wrapper .accordion_wrap .accordion_body{
  width: 100%;
  height: 0px;
  transition: all 0.5s ease;
  background: #7432BA;
  overflow: hidden;
}

.wrapper .accordion_wrap .accordion_body p{
  padding: 15px;
  font-size: 15px;
  line-height: 22px;
  color: #fff;
}

.wrapper .accordion_wrap .accordion_header.active{
  color: #7432BA; 
  border-color: #7432BA;
}

.wrapper .accordion_wrap:last-child .accordion_header.active{
  border-bottom: 2px solid #7432BA;
  border-bottom-left-radius: 0px;
  border-bottom-right-radius: 0px;
}

.wrapper .accordion_wrap .accordion_header.active:before,
.wrapper .accordion_wrap .accordion_header.active:after{
  background: #7432BA;
}

.wrapper .accordion_wrap .accordion_header.active:after{
  transform: rotate(0deg);
}

.wrapper .accordion_wrap .accordion_header.active + .accordion_body{
  height: 180px;
}
@media screen and (max-width: 540px) {
.wrapper{
  width: 300px;
}
  .wrapper .accordion_wrap .accordion_body p{
  padding: 17px;
  font-size: 13px;
  line-height: 18px;
  color: #fff;
}
}

JavaScript:

      $(".accordion_header").click(function(){
    $(".accordion_header").removeClass("active");
   $(this).addClass("active");
});

RELATED ARTICLES

LEAVE A REPLY

Please enter your comment!
Please enter your name here

All Categories

Most Popular