CSS Accordion Menu

In this example below you will see how to do a CSS Accordion Menu with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by kenc96, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright kenc96 ©
  • HTML
  • CSS
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>CSS Accordion Menu</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <!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">

    <title>CSS Accordion Menus</title>

    <link rel="stylesheet" href="CSS/style.css"/>
    <link rel="stylesheet" href="CSS/accordion.css"/>
  </head>
  <body>
    
      

      <div class="container">
        <div class="headline">
          <h1>Frequently Asked Questions</h1>
        </div>
      </div>

      <div class="tab-group">

        <!-- start tab-1 -->
        <div class="tab">
          <input id="tab-1" type="checkbox" name="tabs">
          <label for="tab-1" >Label One</label>
          <div class="tab-content">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac laoreet elit. Phasellus dignissim purus vitae urna cursus, quis congue ligula tristique. Ut nec blandit risus. Donec at orci ut justo venenatis viverra.</p>
          </div>
        </div>
        <!-- end tab-1 -->

        <!-- start tab-2 -->
        <div class="tab">
          <input id="tab-2" type="checkbox" name="tabs">
          <label for="tab-2" >Label Two</label>
          <div class="tab-content">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac laoreet elit. Phasellus dignissim purus vitae urna cursus, quis congue ligula tristique. Ut nec blandit risus. Donec at orci ut justo venenatis viverra.</p>
          </div>
        </div>
        <!-- end tab-2 -->

        <!-- start tab-3 -->
        <div class="tab">
          <input id="tab-3" type="checkbox" name="tabs">
          <label for="tab-3" >Label Three</label>
          <div class="tab-content">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac laoreet elit. Phasellus dignissim purus vitae urna cursus, quis congue ligula tristique. Ut nec blandit risus. Donec at orci ut justo venenatis viverra.</p>
          </div>
        </div>
        <!-- end tab-3 -->

        <!-- start tab-4 -->
        <div class="tab">
          <input id="tab-4" type="checkbox" name="tabs">
          <label for="tab-4" >Label Four</label>
          <div class="tab-content">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac laoreet elit. Phasellus dignissim purus vitae urna cursus, quis congue ligula tristique. Ut nec blandit risus. Donec at orci ut justo venenatis viverra.</p>
          </div>
        </div>
        <!-- end tab-4 -->

        <!-- start tab-5 -->
        <div class="tab">
          <input id="tab-5" type="checkbox" name="tabs">
          <label for="tab-5" >Label Five</label>
          <div class="tab-content">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac laoreet elit. Phasellus dignissim purus vitae urna cursus, quis congue ligula tristique. Ut nec blandit risus. Donec at orci ut justo venenatis viverra.</p>
          </div>
        </div>
        <!-- end tab-5 -->

        <!-- start tab-6 -->
        <div class="tab">
          <input id="tab-6" type="checkbox" name="tabs">
          <label for="tab-6" >Label Six</label>
          <div class="tab-content">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac laoreet elit. Phasellus dignissim purus vitae urna cursus, quis congue ligula tristique. Ut nec blandit risus. Donec at orci ut justo venenatis viverra.</p>
          </div>
        </div>
        <!-- end tab-5 -->
    </div>
  </body>
</html>
  
  

</body>

</html>

/*Downloaded from https://www.codeseek.co/kenc96/css-accordion-menu-zBVQYK */
@import url(https://fonts.googleapis.com/css?family=Audiowide);

/* BASE STYLES */

html {
  box-sizing: border-box;
  font-family: Arial, sans-serif;
  font-size: 16px;
  font-weight: normal;
  line-height: 1.4;
}
html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
  width: 100%;
}
body:before {
	content: "";
  display: table;
  clear: both;
}
body {
  color: #797e83;
  font-size: 16px;
	margin: 0;
  line-height: 1.5;
}
h1 {
	font-size: 1.75em;
}
ul,
li {
  margin: 0;
  padding: 0;
  list-style-type: none;
}
a {
  color: #656a6e;
  text-decoration: none;
  font-weight: 400;
}
.container {
	width: 90%;
	margin: auto;
}

*,
*:before,
*:after  { box-sizing: inherit; }

/********************************
Accordion Menu
********************************/

.headline {
  text-align: center;
  margin: 2.5em auto 1em;
}

.tab-group {
  background: #eee;
	margin: 2em auto;
	max-width: 40em;
	width: 100%;
}

.tab {
	position: relative;
  width: 100%;
}

.tab input {
	left: 0;
	position: absolute;
	top: 0;
	z-index: -999;
}

.tab label {
	background: #72d2c6;
	color: #fff;
	cursor: pointer;
	display: block;
	font-weight: bold;
	line-height: 3;
	margin-bottom: 0.5em;
	padding-left: 0.5em;
	transition: letter-spacing 0.55s ;
}

.tab input:focus + label,
.tab label:hover{
	background: #85D8CE;
	letter-spacing: 1px;
}

.tab-content {
	max-height: 0;
	overflow: hidden;
	transition: all 0.35s;
}

.tab-content p {
	margin: 1em 0;
}

/* open the tab when label is checked */

.tab input:checked ~ .tab-content {
	max-height: 6.25em;
}


/*.tab > input:not(:focus) ~ .tab-content {
	max-height: 0;
	transition: all .75s cubic-bezier(0.19, 1, 0.22, 1) .15s;
}*/

Comments