Simple Accordion Menu Using HTML And CSS Only

In this article, I am going to show you how to create an accordion menu using only simple HTML and CSS code. There are many ways to create an accordion menu. But the easiest way I am going to show this article. I created this menu using a very small amount of HTML and CSS code.

You can follow the video tutorial below to know more about this menu bar. From this video, you can learn step by step how this accordion menu bar was created.

Demo: Click here


Download: Click here

You can download the source code required to make it completely free by clicking on the download button above. You can use the demo button above to watch the live demo.

If you want to know which programming code has been used to extend an element, you can follow the tutorial below. Below I have shown you how to create this menu bar in four steps.

Step 1: Add menus and text

The menus in this menu bar and the accompanying text have been created using the following programming codes. Here I am using six menus. You can add as many menus as you like and make changes.

 <!-- html code-->
    <h1>Pure CSS Accordion Menu</h1>
    <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.
            </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.
            </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.
            </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.
            </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.
            </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.
            </div>
        </div>
    </div>

Step 2: Design the background and menus

Menu in this accordion menu using your own programming codes
These have been designed. Blue color has been used in the background of the menus.

/* now add css code */
body{
    background: #ecf0f1;
    font-family: 'source sans pro';
    font-weight: 400;
}
h1{
    font-size: 35px;
    color: #2c97de;
    text-align: center;
}
.accordionMenu{
    width: 500px;
    margin: 0 auto;
}
.accordionMenu input[type=radio]{
    display: none;
}
.accordionMenu label{
    display: block;
    height: 50px;
    line-height: 47px;
    padding: 0 25px 0 10px;
    background: #2c97de;
    font-size: 18px;
    color: #fff;
    position: relative;
    cursor: pointer;
    border-bottom: 1px solid #e6e6e6;
}

Step 3: Design and hide the contents of the menus

In general, the contents of this menu bar are hidden, only the menus are visible. The following programming code has been used to hide and design those.

.accordionMenu label::after{
    display: block;
    content: "";
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 5px 0 5px 10px;
    border-color: transparent transparent transparent #ffffff;
    position: absolute;
    right: 10px;
    top: 20px;
    z-index: 10;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -ms-transition:all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}
.accordionMenu .content{
    max-height: 0;
    height: 0;
    overflow: hidden;
    -webkit-transition: all 2s ease-in-out;
    -moz-transition: all 2s ease-in-out;
    -o-transition: all 2s ease-in-out;
    transition: all 2s ease-in-out;
}
.accordionMenu .content .inner{
    font-size: 1.2rem;
    color: #2c97de;
    line-height: 1.5;
    background: white;
    padding: 20px 10px;
}

Step 4: Add some animations to the accordion menu

In general, the content associated with menus is hidden. When you click on that menu, the contents will appear. To do this, some special programming code has been used which I have given below.

.accordionMenu input[type=radio]:checked + label:after{
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    transform: rotate(90deg);
}

.accordionMenu input[type=radio]:checked + label + .content{
    max-height: 2000px;
    height: auto;
}

I have created this accordion menu using these few methods. If you want to know the complete information, you can watch the video above. Hopefully from this tutorial, you have learned how to create an accordion menu bar. If you have any problem, you can ask me by commenting. Special thanks to you for reading this article to the end.

Comments

[Karyme Tovar]

Hi, I was wondering how to close the menu? I followed the code and I can open the menu with no issue, but it does not let me close, so one of the sections is always open
Thank you!