Blog / General

M/s VIKASH TECH - Responsive Accordion Menu using only HTML & CSS

Hello readers, Today in this blog you'll learn how to create a Responsive Accordion Menu using only HTML & CSS. An accordion menu is a vertically

September 19, 2022 · 3 min read

Hello readers, Today in this blog you'll learn how to create a Responsive Accordion Menu using only HTML & CSS.
An accordion menu is a vertically stacked list of headers or items and that can be clicked to show or hide content linked with them. In this program [Responsive Accordion Menu], there are shown four headers of an accordion, and the contents which are associated with them are hidden. By default, the content of the first header is shown and when you clicked on another tab, the content of that label is shown.
These accordion tabs are controlled with HTML <input type="radio">, so we can only show the content of one header at one time that means when you expand the content of the second header, the first header content will be collapsed automatically. If you're feeling difficult to understand what I am saying. You can try Own with below code copy and paste it.

HTML

<!DOCTYPE html>
<!-- Created By praveen kumar - www.vikashtech.com -->
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- <title>Responsive Accordion Menu | Vikash Tech</title> -->
    <link rel="stylesheet" href="blog.css">
    <script src="https://kit.fontawesome.com/a076d05399.js"></script>
</head>
<body>
  <div class="wrapper">
    <!-- Accordion Heading One -->
    <div class="parent-tab">
      <input type="radio" name="tab" id="tab-1" checked>
      <label for="tab-1">
        <span>Accordion Heading One</span>
        <div class="icon"><i class="fas fa-plus"></i></div>
      </label>
      <div class="content">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing thelit. Quam, repellendus facere, id porro magnam blanditiiss quoteos dolores ratione quidem ipsam esse quos pariatur, repellat obcaecati!</p>
      </div>
    </div>

    <!-- Accordion Heading Two -->
    <div class="parent-tab">
      <input type="radio" name="tab" id="tab-2">
      <label for="tab-2">
        <span>Accordion Heading Two</span>
        <div class="icon"><i class="fas fa-plus"></i></div>
      </label>
      <div class="content">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing thelit. Quam, repellendus facere, id porro magnam blanditiiss quoteos dolores ratione quidem ipsam esse quos pariatur, repellat obcaecati!</p>
      </div>
    </div>

    <!-- Accordion Heading Three -->
    <div class="parent-tab tab-3">
      <input type="radio" name="tab" id="tab-3">
      <label for="tab-3" class="tab-3">
        <span>Accordion Heading Three</span>
        <div class="icon"><i class="fas fa-plus"></i></div>
      </label>
      <div class="content">
        <!-- Sub Heading One -->
        <div class="child-tab">
          <input type="checkbox" name="sub-tab" id="tab-4">
          <label for="tab-4">
            <span>Sub Heading One</span>
            <div class="icon"><i class="fas fa-plus"></i></div>
          </label>
          <div class="sub-content">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing thelit dolor. Utfacilis labore, exercitationem fuga minima a illo modi vitaerse dignissimos? Vero?</p>
          </div>
        </div>
        <!-- Sub Heading Two -->
        <div class="child-tab">
          <input type="checkbox" name="sub-tab" id="tab-5">
          <label for="tab-5">
            <span>Sub Heading Two</span>
            <div class="icon"><i class="fas fa-plus"></i></div>
          </label>
          <div class="sub-content">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing thelit dolor. Utfacilis labore, exercitationem fuga minima a illo modi vitaerse dignissimos? Vero?</p>
          </div>
        </div>
      </div>
    </div>

    <!-- Accordion Heading Four -->
    <div class="parent-tab">
      <input type="radio" name="tab" id="tab-6">
      <label for="tab-6">
        <span>Accordion Heading Four</span>
        <div class="icon"><i class="fas fa-plus"></i></div>
      </label>
      <div class="content">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing thelit. Quam, repellendus facere, id porro magnam blanditiiss quoteos dolores ratione quidem ipsam esse quos pariatur, repellat obcaecati!</p>
      </div>
    </div>
  </div>

</body>
</html>

CSS

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap');
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
}
body{
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
}
::selection{
  background: rgb(0,123,255,0.3);
}
.wrapper{
  max-width: 600px;
  padding: 0 20px;
}
.wrapper .parent-tab,
.wrapper .child-tab{
  margin-bottom: 8px;
  border-radius: 3px;
  box-shadow: 0px 0px 15px rgba(0,0,0,0.18);
}
.wrapper .parent-tab label,
.wrapper .child-tab label{
  background: #007bff;
  padding: 10px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  border-radius: 3px;
  position: relative;
  z-index: 99;
  transition: all 0.3s ease;
}
.wrapper .parent-tab label:hover{
  background: #006fe6;
}
.parent-tab input:checked ~ label,
.child-tab input:checked ~ label{
  border-radius: 3px 3px 0 0;
  background: #006fe6;
}
.wrapper label span{
  color: #fff;
  font-size: 18px;
  font-weight: 500;
  text-shadow: 0 -1px 1px #0056b3;
}
.wrapper .child-tab label span{
  font-size: 17px;
}
.parent-tab label .icon{
  position: relative;
  height: 30px;
  width: 30px;
  font-size: 15px;
  color: #007bff;
  display: block;
  background: #fff;
  border-radius: 50%;
  text-shadow: 0 -1px 1px #0056b3;
}
.wrapper .child-tab label .icon{
  height: 27px;
  width: 27px;
}
.parent-tab label .icon i{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.parent-tab input:checked ~ label .icon i:before,
.child-tab input:checked ~ label .icon i:before{
  content: '\f068';
}
.wrapper .parent-tab .content,
.wrapper .child-tab .sub-content{
  max-height: 0px;
  overflow: hidden;
  background: #fff;
  border-radius: 0 0 3px 3px;
  transition: all 0.4s ease;
}
.parent-tab input:checked ~ .content,
.child-tab input:checked ~ .sub-content{
  max-height: 100vh;
}
.tab-3 input:checked ~ .content{
  padding: 15px 20px;
}
.parent-tab .content p,
.child-tab .sub-content p{
  padding: 15px 20px;
  font-size: 16px;
}
.child-tab .sub-content p{
  font-size: 15px;
}
input[type="radio"],
input[type="checkbox"]{
  display: none;
}

M/s VIKASH TECH - Responsive Accordion Menu using only HTML & CSS

Vikash Mishra