How To Create An FAQ Accordion Menu Using Only HTML & CSS

How To Create An FAQ Accordion Menu Using Only HTML & CSS

 The accordion menu is a kind of modern-design that is currently widely used. You can easily create a beautiful accordion menu using HTML and CSS code. 

This type of section is mainly used for FAQ. This is the best design for sorting any kind of information step by step. In this article, I have basically tried to explain with all the necessary code and video to make a beautiful accordion menu

HTML programming code has been used to structure these menus and CSS programming code has been used to design them. You can create such menus in different designs such as horizontal and side by side. It will basically help to keep a lot of information neatly arranged in a small space. You can follow the video tutorial given below. There you will learn how to make it step by step.


 If you want to learn which programming code has been used to create an element, follow the tutorial below. In this tutorial, I have shared how to create this accordion menu in 5 steps.

Step 1: Create backgrounds and titles

First of all, the background and title have been made to make it. The title TK is beautifully designed using the color blue. The background color has been whitewashed with it. You can change the color to your liking. If you want to use a picture in the background then you can do it in a very nice way.


 <!-- html code-->
<!DOCTYPE html>
<html>
<head>
    <title>Accordion Menu</title>
<link rel="stylesheet" href="drop.css">
</head>
<body>
   
    <h1>Pure CSS Accordion Menu</h1>
  
</body>
</html>

 <!-- CSS code-->
body{
    background#ecf0f1;
    font-family'source sans pro';
    font-weight400;
}
h1{
    font-size35px;
    color#2c97de;
    text-aligncenter;
}



Create backgrounds and titles


Step 2: Add the necessary menus and text content

The following programming codes have been used to create the menus and the information contained in this accordion menu. There are basically 6 menus made here and there is space for necessary information under it. You can increase the number of these menus if you want. For that, you notice your own programming code nicely. If you look there, you will see that I have used some code to increase each menu bar. I have highlighted those codes with the help of comments. You copy those codes then paste them below. Change the level and ID number with it. The radio button is used for each menu bar in this menu bar. As a result, you will not be able to open many contents at once. You can open the content one by one. When you click on a menu, you will now see content related to that menu. Then if you click on the menu below, the top content will be hidden automatically. The radio button is used to do this.


<div class="accordionMenu">
        <!-- 1st menu  -->
        <input type="radio" name="trg1" id="acc1" checked="checked">
        <label for="acc1">Quisquam Doloremeos</label>
        <div class="content">
            <div class="inner">
                It is a demo text. In this video, I am going to show you how to build a beautiful accordion Menu using simple HTML and CSS programming code.Hopefully by watching the video you have learned how to make it. You can easily download the required source code by clicking on the download link in the description box.
            </div>
        </div>
        <!-- 2nd menu -->
        <input type="radio" name="trg1" id="acc2">
        <label for="acc2">Fugiat esse oditanimi</label>
        <div class="content">
            <div class="inner">
                It is a demo text. In this video, I am going to show you how to build a beautiful accordion Menu using simple HTML and CSS programming code.Hopefully by watching the video you have learned how to make it. You can easily download the required source code by clicking on the download link in the description box.
            </div>
        </div>
        <!-- 3rd menu -->
        <input type="radio" name="trg1" id="acc3">
        <label for="acc3">Quibusdam adipisci</label>
        <div class="content">
            <div class="inner">
                It is a demo text. In this video, I am going to show you how to build a beautiful accordion Menu using simple HTML and CSS programming code.Hopefully by watching the video you have learned how to make it. You can easily download the required source code by clicking on the download link in the description box.
            </div>
        </div>
        <!-- 4th menu -->
        <input type="radio" name="trg1" id="acc4">
        <label for="acc4">Harum animi placeat</label>
        <div class="content">
            <div class="inner">
                It is a demo text. In this video, I am going to show you how to build a beautiful accordion Menu using simple HTML and CSS programming code.Hopefully by watching the video you have learned how to make it. You can easily download the required source code by clicking on the download link in the description box.
            </div>
        </div>
        <!-- 5th menu -->
        <input type="radio" name="trg1" id="acc5">
        <label for="acc5">Obcaecati Quibusdam</label>
        <div class="content">
            <div class="inner">
                It is a demo text. In this video, I am going to show you how to build a beautiful accordion Menu using simple HTML and CSS programming code.Hopefully by watching the video you have learned how to make it. You can easily download the required source code by clicking on the download link in the description box.
            </div>
        </div>
        <!-- 6th menu -->
        <input type="radio" name="trg1" id="acc6">
        <label for="acc6">Modi excepturi</label>
        <div class="content">
            <div class="inner">
                It is a demo text. In this video, I am going to show you how to build a beautiful accordion Menu using simple HTML and CSS programming code.Hopefully by watching the video you have learned how to make it. You can easily download the required source code by clicking on the download link in the description box.
            </div>
        </div>
    </div>


Add the necessary menus and text content


Step 3: Design menus beautifully using CSS code

The following programming codes are common CSS programming codes. Which has been used to fit and design this accordion menu enough. Here the menubars are painted blue and the background of the content is painted white. The text in the content here is painted blue and 25 px and 10px borders are used on both sides, respectively.

.accordionMenu{
    width500px;
    margin0 auto;
}
.accordionMenu input[type=radio]{
    displaynone;
}
.accordionMenu label{
    displayblock;
    height50px;
    line-height47px;
    padding0 25px 0 10px;
    background#2c97de;
    font-size18px;
    color#fff;
    positionrelative;
    cursorpointer;
    border-bottom1px solid #e6e6e6;
}


Design menus beautifully using CSS code


Step 4: Design text content and block display

The following programming codes have been used primarily to block the display. Normally the menus in this menu bar will be visible and the contents will be hidden inside that menu. The following programming codes have been used to create this situation. For this, the position is absolute and the background is blocked. As a result, the contents are completely hidden.

.accordionMenu label::after{
    displayblock;
    content"";
    width0;
    height0;
    border-stylesolid;
    border-width5px 0 5px 10px;
    border-colortransparent transparent transparent #ffffff;
    positionabsolute;
    right10px;
    top20px;
    z-index10;
    -webkit-transitionall 0.3s ease-in-out;
    -moz-transitionall 0.3s ease-in-out;
    -ms-transition:all 0.3s ease-in-out;
    -o-transitionall 0.3s ease-in-out;
    transitionall 0.3s ease-in-out;
}
.accordionMenu .content{
    max-height0;
    height0;
    overflowhidden;
    -webkit-transitionall 2s ease-in-out;
    -moz-transitionall 2s ease-in-out;
    -o-transitionall 2s ease-in-out;
    transitionall 2s ease-in-out;
}
.accordionMenu .content .inner{
    font-size1.2rem;
    color#2c97de;
    line-height1.5;
    backgroundwhite;
    padding20px 10px;
}


Design text content and block display


Step 5: Add some CSS code to make the accordion menus work properly

This is the last step in creating this accordion menu. Here, some amount of CSS code has been used to make the accordion menu functional. When you click on a menu, you can see the content under that menu. Some special CSS programming code has been used to do this. In this case, the maximum height of the content is 1000px and the normal height is automatic.

 Also, some animations have been used here. An Android at the end of each menu bar. When you click on someone or on the menu bar, the account will rotate at a 90-degree angle.

.accordionMenu input[type=radio]:checked + label:after{
    -webkit-transformrotate(90deg);
    -moz-transformrotate(90deg);
    -ms-transformrotate(90deg);
    -o-transformrotate(90deg);
    transformrotate(90deg);
}
 
.accordionMenu input[type=radio]:checked + label + .content{
    max-height2000px;
    heightauto;
}

 

Add some CSS code to make the accordion menus work properly


Hopefully, this tutorial has helped you to learn how to create this accordion menu bar. If you want to know and learn completely, you can follow the video tutorial above. If you want to see the live demo, you can use the demo button above. HTML and CSS programming were used to make it. 

You can download the code to make it completely free by clicking on the download button above. Hope you like this accordion menu section. If you encounter any problems while making it, you can definitely let me know in the comments. I will help you completely.

 Special thanks to you for finally reading the article.


Post a Comment

0 Comments
* Please Don't Spam Here. All the Comments are Reviewed by Admin.