CSS Accordion Menu

Last Updated : 26 Sep, 2023

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.

Prerequisites

HTML
CSS

Approach

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.

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <meta charset="UTF-8"> 
    <meta name="viewport" 
          content="width=device-width,  
                   initial-scale=1.0"> 
    <title>Accordion Menu </title> 
    <style> 
        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; 
        } 
    </style> 
</head> 
  
<body> 
    <h2> GeeksforGeeks</h2> 
    <h3>Accorfion menu by using CSS</h3> 
    <input type="checkbox" id="sec1"> 
    <label for="sec1">HTML</label> 
    <div class="content"> 
        <p> 
            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. 
        </p> 
    </div> 
  
    <input type="checkbox" id="sec2"> 
    <label for="sec2">CSS</label> 
    <div class="content"> 
        <p> 
            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. 
        </p> 
    </div> 
  
    <input type="checkbox" id="sec3"> 
    <label for="sec3">JavaScript</label> 
    <div class="content"> 
        <p> 
            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. 
        </p> 
    </div> 
</body> 
  
</html>