Open In App

CSS Accordion Menu

Last Updated : 26 Sep, 2023
Like Article

In this article, we will see the creation of the Accordion menu by using CSS.

An Accordion Menu is a user interface element that shows a list of items. It allows users to expand or collapse individual items to reveal or hide their content.



  • Create a basic Accordion Menu by including the <div>, and <input> tags. Now, add the 3 <p> tags inside of the <div> tags to add some content to form the Accordion.
  • To style the Accordion, the :checked CSS pseudo-class selector is used that selects the already selected element. Now, using the Adjacent Sibling Selector, make the display as a block, in order to render the content.
  • To hide the div’s content, set the display property to value none.  

Example: This example illustrates the basic implementation of the Accordion Menu in CSS.


<!DOCTYPE html>
<html lang="en">
    <meta charset="UTF-8">
    <meta name="viewport" 
    <title>Accordion Menu </title>
        h2 {
            color: green;
        body {
            width: 40%;
        /* Hide the buttons */
        input[type="checkbox"] {
            display: none;
        /* Style the labels as buttons */
        label {
            display: block;
            padding: 10px 20px;
            background-color: #3498db;
            color: #fff;
            cursor: pointer;
            margin-bottom: 8px;
            border-radius: 3px;
        input[type="checkbox"]:checked+label {
            background-color: gray;
        /* Hide the content divs by default */
        .content {
            display: none;
            padding: 10px;
            border: 1px solid #ccc;
            border-top: none;
            border-radius: 0 0 5px 5px;
        /* Show the content */
        input[type="checkbox"]:checked+label+.content {
            display: block;
    <h2> GeeksforGeeks</h2>
    <h3>Accorfion menu by using CSS</h3>
    <input type="checkbox" id="sec1">
    <label for="sec1">HTML</label>
    <div class="content">
            HTML stands for HyperText Markup Language.
            It is used to design the web pages. With
            the help of HTML, you can create a complete
            website structure. HTML is the combination
            of Hypertext and Markup language.
    <input type="checkbox" id="sec2">
    <label for="sec2">CSS</label>
    <div class="content">
            CSS (Cascading Style Sheets) is used to
            styles web pages. Cascading Style Sheets
            are fondly referred to as CSS. The reason
            for using this is to simplify the process
            of making web pages presentable.
    <input type="checkbox" id="sec3">
    <label for="sec3">JavaScript</label>
    <div class="content">
            JavaScript is a lightweight, cross-platform,
            single-threaded, and interpreted compiled
            programming language. It is also known as
            the scripting language for webpages. It is
            well-known for the development of web pages,
            and many non-browser environments also use it.



Like Article
Suggest improvement
Share your thoughts in the comments

Similar Reads