Multi Level Accordion Menu Using HTML and CSS

HTML

CSS

Output

HTML Copied

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Multi level accordion menu using HTML and CSS</title>

</head>

<body>

<h1 class="mainHeading">Multi level accordion menu using HTML and CSS</h1>
  <div>

<aside class="accordionMainCls">
      <h1>Teknowize - HTML</h1>
      <div class="showing-for-teknowize">
        <h2>Accordion Item #1</h2>
        <div class="showing-for-teknowize">
          <h3>Accordion Item #1a</h3>
          <div>
            <h4>Accordion Sub-Item 1</h4>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et
              dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex
              ea commodo consequat.</p>
            <h4>Accordion Sub-Item 2</h4>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et
              dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex
              ea commodo consequat.</p>

<h4>Accordion Sub-Item 3</h4>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et
              dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex
              ea commodo consequat.</p>
          </div>

<h3>Accordion Item #1b</h3>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et
            dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex
            ea commodo consequat.</p>

<h3>Accordion Item #1c</h3>
          <div class="showing-for-teknowize">
            <h4>Accordion Sub-Item 1</h4>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et
              dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex
              ea commodo consequat.</p>

<h4>Accordion Sub-Item 2</h4>
            <p class="showing-for-teknowize">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
              tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation
              ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
          </div>
        </div>

<h2>Accordion Item #2</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et
          dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
          commodo consequat.</p>

<h2>Accordion Item #3</h2>
        <div>
          <h3>Accordion Item #3a</h3>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et
            dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex
            ea commodo consequat.</p>

<h3>Accordion Item #3b</h3>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et
            dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex
            ea commodo consequat.</p>
        </div>
      </div>

<h1>Teknowize - CSS</h1>
      <div>
        <h2>Update #1</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et
          dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
          commodo consequat.</p>

<h2>Update #2</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et
          dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
          commodo consequat.</p>

<h2>Update #3</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et
          dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
          commodo consequat.</p>

<h2>Update #4</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et
          dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
          commodo consequat.</p>
      </div>

<h1>Teknowize - javaScript</h1>
      <div>
        <h2>Misc. #1</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et
          dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
          commodo consequat.</p>

<h2>Misc. #2</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et
          dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
          commodo consequat.</p>

<h2>Misc. #3</h2>
        <div>
          <h3>Misc. Item #1a</h3>
          <div>
            <h4>Misc. Subitem 1</h4>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et
              dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex
              ea commodo consequat.</p>

<h4>Misc. Subitem 2</h4>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et
              dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex
              ea commodo consequat.</p>

<h4>Misc. Subitem 3</h4>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et
              dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex
              ea commodo consequat.</p>
          </div>
          <h3>Misc. Item #2a</h3>
          <div>
            <h4>Misc. Subitem 1</h4>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et
              dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex
              ea commodo consequat.</p>

</body>

</html>

CSS Copied

.mainHeading {
      color: rgb(6, 2, 114);
      text-align: center;
      padding: 3rem;
    }

* {
      margin: 0;
      padding: 0;
    }

.accordionMainCls {
      width: 400px;
      margin: 20px auto;
    }

.accordionMainCls h1,
    h2,
    h3,
    h4 {
      cursor: pointer;
    }

.accordionMainCls h2,
    h3,
    h4 {
      font-family: "News Cycle";
    }

.accordionMainCls h1 {
      padding: 15px 20px;
      background-color: #333;
      font-family: Lobster;
      font-size: 1.5rem;
      font-weight: normal;
      color: #1bdb09;
    }

.accordionMainCls h1:hover {
      color: #06b924;
    }

.accordionMainCls h1:first-child {
      border-radius: 10px 10px 0 0;
    }

.accordionMainCls h1:last-of-type {
      border-radius: 0 0 10px 10px;
    }

.accordionMainCls h1:not(:last-of-type) {
      border-bottom: 1px dotted #1abc9c;
    }

.accordionMainCls div,
    .accordionMainCls p {
      display: none;
    }

.accordionMainCls h2 {
      padding: 5px 25px;
      background-color: #b9bc1a;
      font-size: 1.1rem;
      color: #333;
    }

.accordionMainCls h2:hover {
      background-color: #a609ab;
      color: white;
    }

.accordionMainCls h3 {
      padding: 5px 30px;
      background-color: #41b955;
      font-size: .9rem;
      color: white;
    }

.accordionMainCls h3:hover {
      background-color: #3133a9;
    }

.accordionMainCls h4 {
      padding: 5px 35px;
      background-color: #ff5a5a;
      font-size: .9rem;
      color: white;
    }

.accordionMainCls h4:hover {
      background-color: #40c8e0;
    }

.accordionMainCls p {
      padding: 15px 35px;
      background-color: #ddd;
      font-family: "Georgia";
      font-size: .8rem;
      color: #333;
      line-height: 1.3rem;
    }

.accordionMainCls .opened-for-codepen {
      display: block;
    }