Hello readers, Today in this blog you'll learn how to create a Responsive Accordion Menu using only HTML & CSS. Previously I've shared a blog on how to create a Responsive Testimonials Section and now it's time to create an Accordion that is mainly used while creating a FAQ section on websites. 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 , 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. You can copy the codes from the given boxes or download the code files from the given link but I recommend you to download the source code files instead of copying codes. Click here to download code files. ####You might like this: Responsive Mega Menu Design Working Pagination UI Design Advanced Dropdown Menu Bar Active Tab Hover Animation ######HTML CODE: ```

Accordion Heading One

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!

Accordion Heading Two

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!

Accordion Heading Three

Sub Heading One

Lorem ipsum dolor sit amet, consectetur adipisicing thelit dolor. Utfacilis labore, exercitationem fuga minima a illo modi vitaerse dignissimos? Vero?

Sub Heading Two

Lorem ipsum dolor sit amet, consectetur adipisicing thelit dolor. Utfacilis labore, exercitationem fuga minima a illo modi vitaerse dignissimos? Vero?

Accordion Heading Four

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!

``` ######CSS CODE: ``` @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; } ```

menudesign

Responsive Accordion Menu using only HTML & CSS

Join Our Newsletter. No Spam, Only the good stuff.