7+ JavaScript Accordion Menu Examples

This post contains a total of 7+ Hand-Picked JavaScript Accordion Menu Examples with Source Code. All these Accordion Menus are made using JavaScript and Styled using CSS.

You can use the source code of these examples with credits to the original owner.

Related Posts

JavaScript Accordion Menu Examples

1. By Marty

Made by Marty. Collapsible Accordion Menu. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>

<style>
@import url("https://fonts.googleapis.com/css2?family=Ubuntu&display=swap");

html,
body {
  margin: 0;
  width: 100%;
  height: 100%;
  background: rgb(192, 48, 77);
  background: linear-gradient(
    174deg,
    rgba(192, 48, 77, 1) 0%,
    rgba(158, 37, 61, 1) 100%
  );
  font-family: "Ubuntu", sans-serif;
}

.container {
  width: 100%;
  max-width: 25rem;
  padding: 2rem;
  margin: 3rem auto;
  background: hsl(0, 0%, 14%);
  border-radius: 1rem;
  border: 1px solid #222;
  box-shadow: 0px 0px 34px -8px rgba(0, 0, 0, 0.55);
}

.accordion {
  background-color: #333;
  color: #eee;
  cursor: pointer;
  padding: 1rem;
  width: 100%;
  border: 1px solid #222;
  text-align: left;
  outline: none;
  font-size: 1rem;
  transition: all 0.4s ease-out;
  box-shadow: 0px 0px 34px -8px rgba(0, 0, 0, 0.75);
}

.accordion:first-child {
  border-radius: 1rem 1rem 0 0;
}

.accordion:nth-last-child(1) {
  border-radius: 0 0 1rem 1rem;
}

.accordion:nth-last-child(1):hover {
  background: crimson;
}

.active,
.accordion:hover {
  background-color: #426ef0;
}

.accordion:after {
  content: "\002B";
  color: #eee;
  font-weight: bold;
  float: right;
  margin-left: 0.5rem;
}

.active:after {
  content: "\2212";
}

.accordion-content {
  padding: 0 1rem;
  background-color: #222;
  color: #aaa;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
}

.accordion-content ul {
  list-style-type: circle;
  margin: 1rem 0;
  padding: 0.2rem;
}

.accordion-content ul li {
  padding: 0.2rem 0;
}
</style>
</head>
<body>
  <div class="container">
  <button class="accordion">Profile</button>
  <div class="accordion-content">
    <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>

  <button class="accordion">Messages</button>
  <div class="accordion-content">
    <ul>
      <li>Inbox</li>
      <li>Sent</li>
      <li>Drafts</li>
    </ul>
  </div>

  <button class="accordion">Settings</button>
  <div class="accordion-content">
    <ul>
      <li>Profile</li>
      <li>Privacy & Safety</li>
      <li>Notifications</li>
    </ul>
  </div>

  <button class="accordion">Log out</button>
</div>
    <script src="https://cpwebassets.codepen.io/assets/common/stopExecutionOnTimeout-1b93190375e9ccc259df3a57c1abc0e64599724ae30d7ea4c6877eb615f89387.js"></script>

      <script>
let acc = document.querySelectorAll(".accordion");
let i;

for (i = 0; i < acc.length; i++) {if (window.CP.shouldStopExecution(0)) break;
  acc[i].addEventListener("click", function () {
    this.classList.toggle("active");
    let panel = this.nextElementSibling;
    if (panel.style.maxHeight) {
      panel.style.maxHeight = null;
    } else {
      panel.style.maxHeight = panel.scrollHeight + "px";
    }
  });
}window.CP.exitedLoop(0);
    </script>
</body>
</html>

2. By Alex

Made by Alex. JavaScript Accordion Multi Menu. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
  <meta name="viewport" content="width=device-width">
<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro" rel="stylesheet">
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">

<style>
/*
 * Developer: Alireza Eskandarpour Shoferi
 * Designer: Nevide (codecanyon.net/user/Nevide)
 *
 * Distributed under the terms of the MIT license
 * https://opensource.org/licenses/MIT
 */
ul {
  margin: 0;
  padding: 0;
  list-style-type: none;
}
a {
  color: #646464;
  text-decoration: none;
}
body {
  background-color: #64D7E2;
  font-family: "Source Sans Pro", sans-serif;
}
.wrapper {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -140px;
  margin-left: -140px;
  width: 280px;
  background-color: #fff;
  box-shadow: 0 4px 10px #7A9BAC;
  font-size: 0.875em;
}
.items {
  padding: 18px 0;
}
.items > li > a {
  display: block;
  margin: 0 auto;
  width: 90%;
  text-indent: 18px;
  line-height: 39px;
}
.items > li > a::after {
  position: absolute;
  right: 30px;
  margin-top: 2px;
  font-family: "FontAwesome";
}
.items > li > a::after {
  right: 30px;
  content: "\f061";
}
.itemHover {
  color: #fff;
  font-weight: 600;
  transition: background-color 0.4s ease-in-out;
}
.items > li > a:hover {
  background-color: #8EE8F1;
  color: #fff;
  font-weight: 600;
  transition: background-color 0.4s ease-in-out;
}
.items > li > a.expanded {
  background-color: #64D7E2;
  color: #fff;
  font-weight: 600;
  transition: background-color 0.4s ease-in-out;
}
.items > li > a.expanded::after {
  content: "\f063";
}
.sub-items > li:first-child > a {
  margin-top: 17px;
  height: 34px;
}
.sub-items > li:last-child > a {
  margin-bottom: 17px;
  height: 34px;
}
.sub-items a {
  position: relative;
  display: block;
  margin: 0 auto;
  width: 212px;
  text-indent: 24px;
  line-height: 39px;
}
.sub-items a {
  border-left: 2px solid #64D7E2;
}
.sub-items .current {
  position: relative;
  color: #64D7E2;
  border-color: white;
}
.sub-items > li:hover > a {
  color: #64D7E2;
  transition: color 0.4s ease-in-out;
}
.sub-items {
  display: none;
}
</style>
</head>
<body>
  <div class='wrapper'>
  <ul class='items'>
    <li>
      <a href='#'>Lorem ipsum</a>
      <ul class='sub-items'>
        <li>
          <a href='#'>Lorem ipsum dolor sit amet.</a>
        </li>
        <li>
          <a href='#'>Lorem ipsum dolor sit amet.</a>
        </li>
      </ul>
    </li>
    <li>
      <a href='#'>Lorem ipsum</a>
      <ul class='sub-items'>
        <li>
          <a href='#'>Lorem ipsum dolor sit amet.</a>
        </li>
        <li>
          <a href='#'>Lorem ipsum dolor sit amet.</a>
        </li>
      </ul>
    </li>
    <li>
      <a href='#'>Lorem ipsum</a>
      <ul class='sub-items'>
        <li>
          <a href='#'>Lorem ipsum dolor sit amet.</a>
        </li>
        <li>
          <a href='#'>Lorem ipsum dolor sit amet.</a>
        </li>
      </ul>
    </li>
    <li>
      <a href='#'>Lorem ipsum</a>
      <ul class='sub-items'>
        <li>
          <a href='#'>Lorem ipsum dolor sit amet.</a>
        </li>
        <li>
          <a href='#'>Lorem ipsum dolor sit amet.</a>
        </li>
      </ul>
    </li>
  </ul>
</div>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>
      <script>
$(".items > li > a").click(function (e) {
  e.preventDefault();
  var $this = $(this);
  if ($this.hasClass("expanded")) {
    $this.removeClass("expanded");
  } else {
    $(".items a.expanded").removeClass("expanded");
    $this.addClass("expanded");
    $(".sub-items").filter(":visible").slideUp("normal");
  }
  $this.parent().children("ul").stop(true, true).slideToggle("normal");
});

$(".sub-items a").click(function () {
  $(".sub-items a").removeClass("current");
  $(this).addClass("current");
});
    </script>
</body>
</html>

3. By Corey Roth

Made by Corey Roth. Simple Accordion menu. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>

<style>
.expand {
  float: right;
  display: inline;
  transition: all 0.2s ease;
  -webkit-transition: all 0.2s ease;
  margin: 0 10px;
}

h1 {
  font-size: 2.25em;
  text-transform: uppercase;
  font-family: "Source Sans Pro", sans-serif;
  font-weight: 900;
  margin: 0 20px;
  color: #8aa8bd;
  text-rendering: optimizeLegibility;
  line-height: 1;
  margin-bottom: 10px;
}

h2 {
  font-size: 36px;
  font-weight: 700;
  text-rendering: optimizeLegibility;
  letter-spacing: 0.5px;
}

body, input, textarea {
  font-weight: 200;
  font-family: "Source Sans Pro", sans-serif;
  line-height: 1.54;
  font-size: 16px;
  background: #efefef;
  -webkit-font-smoothing: subpixel-antialiased;
}

.sidebar-1 {
  /* these are the styles for the container around the menu */
  text-align: right;
  padding: 0px;
  display: inline-block;
  box-shadow: 0 0px 1px 0 rgba(0, 0, 0, 0.2);
  margin-left: 20px;
}

.sidebar-menu {
  /*this style impacts the look of the heading containers. */
  cursor: pointer;
  padding: 10px;
  background: #ffffff;
  position: relative;
  color: #8aa8bd;
  border-bottom: 1px solid #dedede;
  font-size: 1.5em;
  font-weight: 300;
  text-rendering: optimizeLegibility;
  letter-spacing: 0.5px;
  padding-right: 50px;
}
.sidebar-menu:before, .sidebar-menu:after {
  content: "";
  width: 3px;
  height: 25px;
  background: #A8CC96;
  border-radius: 3px;
  position: absolute;
  right: 22px;
  top: calc(28.7px - 12.5px);
  transition: all 0.2s ease;
}
.sidebar-menu:after {
  transform: rotate(90deg);
}

.open:before {
  animation: turn-plus;
  animation-duration: 0.3s;
  animation-fill-mode: forwards;
}

.open:after {
  animation: turn-crossbar;
  animation-duration: 0.3s;
  animation-fill-mode: forwards;
}

@keyframes turn-plus {
  0% {
    transform: translate(0, 0);
  }
  50% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(90deg);
  }
}
@keyframes turn-crossbar {
  0% {
    transform: none;
    transform: rotate(90deg);
  }
  50% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(90deg);
  }
}
.sidebar-menu:hover {
  background: #f2f2f2;
}

.sub-menu {
  /*this style is for the sub-menu box*/
  color: #3f5b6f;
  border-bottom: 1px solid #dedede;
  font-size: 1em;
  display: none;
}
.sub-menu:last-child {
  border-bottom: 0;
}

.sub-menu li:hover {
  background: #cccccc;
  cursor: pointer;
}

.sub-menu li {
  /*this styles individual elements in a sub-menu*/
  padding: 10px;
  background: #d7d7d7;
  border-bottom: 1px solid #dedede;
}
.sub-menu li:last-child {
  border-bottom: 0;
}

.sub-menu ul {
  /*this just 0s out a bunch of stuff so that it plays nice with the list stylings*/
  list-style-type: none;
  margin: 0;
  padding: 0;
}

@media (max-width: 540px) {
  .sidebar-menu {
    font-size: 1em;
    font-weight: 400;
  }

  .sub-menu {
    font-weight: 400;
  }

  .sidebar-1 {
    margin: 0;
    width: 100%;
  }

  .sidebar-menu:after, .sidebar-menu:before {
    top: calc(23.5px - 12.5px);
  }
}
</style>
</head>
<body>
  <link href="//netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
<link href='https://fonts.googleapis.com/css?family=Source+Sans+Pro:200,300,400,900' rel='stylesheet' type='text/css'>
<h1>Lorem</h1>
<div class='sidebar-1'> 
  <div class='sidebar-menu'>Lorem<div class='expand'></div></div>
<div class='sub-menu'>
  <ul>
	<li>Lorem</li>
  </ul>
</div>
  <div class='sidebar-menu'>Lorem<div class='expand'></div></div>
<div class='sub-menu'>
  <ul>
	<li>Lorem</li>
  </ul>
</div>
  <div class='sidebar-menu'>Lorem<div class='expand'></div></div>
<div class='sub-menu'>
	<ul>
  <li>Lorem</li>
    </ul>
</div>
  <div class='sidebar-menu'>Lorem<div class='expand'></div></div>
<div class='sub-menu'>
  <ul>
	<li>Lorem</li>
    </ul>
</div>
  <div class='sidebar-menu'>Lorem<div class='expand'></div></div>
<div class='sub-menu'>
  <ul>
	<li>Lorem</li>
    </ul>
</div>
  <div class='sidebar-menu'>Lorem<div class='expand'></div></div>
<div class='sub-menu'>
  <ul>
	<li>Lorem</li>
    </ul>
</div>
  <div class='sidebar-menu'>Lorem<div class='expand'></div></div>
<div class='sub-menu'>
  <ul>
	<li>Lorem</li>
    </ul>
</div>
</div>
  <script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
      <script>
$(document).ready(function () {

  $('.sidebar-menu').mouseenter(function () {
    $(this).children('.expand').addClass('turn');
  });

  $('.sidebar-menu').mouseleave(function () {
    if ($(this).hasClass('open')) {
    } else {
      $(this).children('.expand').removeClass('turn');
    }
  });

  $('.sidebar-menu').click(function () {
    var $this = $(this);
    if ($this.hasClass('open')) {
      $('.sidebar-menu').removeClass('open');
      $('.sub-menu').stop(true).slideUp("fast");
      $('.expand').removeClass('turn');
      $this.removeClass('open');
      $this.children('.expand').removeClass('turn');
      $this.next().stop(true).slideUp("fast");
    } else
    {
      $('.sidebar-menu').removeClass('open');
      $('.sub-menu').stop(true).slideUp("fast");
      $('.expand').removeClass('turn');

      $this.addClass('open');
      $this.children('.expand').addClass('turn');
      $this.next().stop(true).slideDown("fast");
    }
  });

});
    </script>
</body>
</html>

4. By Agustin Ortiz

Made by Agustin Ortiz. Simple JavaScript Accordion menu with Icons. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
	<link href='//fonts.googleapis.com/css?family=Open+Sans:400,700' rel='stylesheet' type='text/css'>
	<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">

<style>
* {
	margin: 0;
	padding: 0;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

body {
	background: #2d2c41;
	font-family: 'Open Sans', Arial, Helvetica, Sans-serif, Verdana, Tahoma;
}

ul {
	list-style-type: none;
}

a {
	color: #b63b4d;
	text-decoration: none;
}

/** =======================
 * Contenedor Principal
 ===========================*/
h1 {
 	color: #FFF;
 	font-size: 24px;
 	font-weight: 400;
 	text-align: center;
 	margin-top: 80px;
 }

h1 a {
 	color: #c12c42;
 	font-size: 16px;
 }

 .accordion {
 	width: 100%;
 	max-width: 360px;
 	margin: 30px auto 20px;
 	background: #FFF;
 	-webkit-border-radius: 4px;
 	-moz-border-radius: 4px;
 	border-radius: 4px;
 }

.accordion .link {
	cursor: pointer;
	display: block;
	padding: 15px 15px 15px 42px;
	color: #4D4D4D;
	font-size: 14px;
	font-weight: 700;
	border-bottom: 1px solid #CCC;
	position: relative;
	-webkit-transition: all 0.4s ease;
	-o-transition: all 0.4s ease;
	transition: all 0.4s ease;
}

.accordion li:last-child .link {
	border-bottom: 0;
}

.accordion li i {
	position: absolute;
	top: 16px;
	left: 12px;
	font-size: 18px;
	color: #595959;
	-webkit-transition: all 0.4s ease;
	-o-transition: all 0.4s ease;
	transition: all 0.4s ease;
}

.accordion li i.fa-chevron-down {
	right: 12px;
	left: auto;
	font-size: 16px;
}

.accordion li.open .link {
	color: #b63b4d;
}

.accordion li.open i {
	color: #b63b4d;
}
.accordion li.open i.fa-chevron-down {
	-webkit-transform: rotate(180deg);
	-ms-transform: rotate(180deg);
	-o-transform: rotate(180deg);
	transform: rotate(180deg);
}

.accordion li.default .submenu {display: block;}
/**
 * Submenu
 -----------------------------*/
 .submenu {
 	display: none;
 	background: #444359;
 	font-size: 14px;
 }

 .submenu li {
 	border-bottom: 1px solid #4b4a5e;
 }

 .submenu a {
 	display: block;
 	text-decoration: none;
 	color: #d9d9d9;
 	padding: 12px;
 	padding-left: 42px;
 	-webkit-transition: all 0.25s ease;
 	-o-transition: all 0.25s ease;
 	transition: all 0.25s ease;
 }

 .submenu a:hover {
 	background: #b63b4d;
 	color: #FFF;
 }
</style>
</head>
<body>
  <h1>text<a href="#"> text</a></h1>
	<ul id="accordion" class="accordion">
		<li>
			<div class="link"><i class="fa fa-paint-brush"></i>text<i class="fa fa-chevron-down"></i></div>
			<ul class="submenu">
				<li><a href="#">text</a></li>
			</ul>
		</li>
		<li class="default open">
			<div class="link"><i class="fa fa-code"></i>text<i class="fa fa-chevron-down"></i></div>
			<ul class="submenu">
				<li><a href="#">text</a></li>
			</ul>
		</li>
		<li>
			<div class="link"><i class="fa fa-mobile"></i>text<i class="fa fa-chevron-down"></i></div>
			<ul class="submenu">
				<li><a href="#">text</a></li>
			</ul>
		</li>
		<li><div class="link"><i class="fa fa-globe"></i>text<i class="fa fa-chevron-down"></i></div>
			<ul class="submenu">
				<li><a href="#">text</a></li>
			</ul>
		</li>
	</ul>
  <script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
      <script>
$(function () {
  var Accordion = function (el, multiple) {
    this.el = el || {};
    this.multiple = multiple || false;


    var links = this.el.find('.link');

    links.on('click', { el: this.el, multiple: this.multiple }, this.dropdown);
  };

  Accordion.prototype.dropdown = function (e) {
    var $el = e.data.el;
    $this = $(this),
    $next = $this.next();

    $next.slideToggle();
    $this.parent().toggleClass('open');

    if (!e.data.multiple) {
      $el.find('.submenu').not($next).slideUp().parent().removeClass('open');
    };
  };

  var accordion = new Accordion($('#accordion'), false);
});
    </script>
</body>
</html>

5. By Ahmad Emran

Made by Ahmad Emran. Accordion menu with hover effect. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
  <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css'>
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.7.2/css/all.min.css'>
  
<style>
@charset "UTF-8";
body {
  padding: 0;
  margin: 0;
  background-color: #324252;
}

h1 {
  font-family: "Century Gothic";
  margin: 30px auto 30px auto;
  color: #09fbd2;
  width: 100%;
  text-align: center;
}

ul.menu {
  padding: 0;
  list-style: none;
  width: 400px;
  margin: 20px auto;
  font-family: "Century Gothic";
  box-shadow: 0px 0px 25px #00000070;
  clear: both;
  display: table;
  margin-bottom: 100px;
}
ul.menu .list {
  font-size: 14px;
  border-bottom: 1px solid #324252;
  position: relative;
  width: 100%;
  box-sizing: border-box;
  height: 50px;
  vertical-align: sub;
  background: #3e5165;
  clear: both;
}
ul.menu .list:after {
  content: "๏„‡";
  font-family: FontAwesome;
  position: absolute;
  right: 17px;
  top: 17px;
  padding: 0px 5px;
  color: #fff;
}
ul.menu .list:before {
  content: "๏ป";
  font-family: FontAwesome;
  position: absolute;
  left: 17px;
  top: 17px;
  padding: 0px 5px;
  color: #fff;
}
ul.menu .list a {
  text-decoration: none;
  color: #fff;
  padding: 17px 0px 17px 45px;
  display: block;
  height: 100%;
  box-sizing: border-box;
}
ul.menu .list a:hover {
  background-color: #324252;
  transition: 300ms all;
  color: #09fbd2;
}
ul.menu .list .items {
  height: 0px;
  overflow: hidden;
}
ul.menu .list .items a {
  padding: 17px;
}
ul.menu .list .items a:hover {
  background-color: #3f5d79;
  color: #fff;
  transition: 300ms all;
}
ul.menu .list:last-child {
  border-bottom: none;
}
ul.menu .active:after {
  content: "๏„†";
  font-family: FontAwesome;
  position: absolute;
  right: 17px;
  top: 17px;
  padding: 0px 5px;
  color: #fff;
}
ul.menu .active:before {
  content: "๏ผ";
  font-family: FontAwesome;
  position: absolute;
  left: 17px;
  top: 17px;
  padding: 0px 5px;
  color: #fff;
}
ul.menu .active > .items {
  display: block;
  background: #23313f;
  padding: 0px;
  height: auto;
  color: #fff;
  transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
  transition: all 200ms;
  clear: both;
  float: left;
  width: 100%;
}
ul.menu .active > .items li {
  padding: 0px;
  border-bottom: 1px solid #324252;
  list-style: none;
}
ul.menu .active > .items li:last-child {
  border-color: transparent;
  padding-bottom: 0px;
}
ul.menu .active > .items .active > .items {
  background-color: #2f4b67;
}
ul.menu .active > a {
  color: #46efa4;
  text-transform: uppercase;
  font-weight: bold;
}
ul.menu .active .list {
  background: #697d92;
}
ul.menu .active .list a {
  padding: 17px 0px 17px 45px;
}

/*  footer   */
footer {
  background-color: #222;
  color: #fff;
  font-size: 14px;
  bottom: 0;
  position: fixed;
  left: 0;
  right: 0;
  text-align: center;
  z-index: 999;
}

footer p {
  margin: 10px 0;
  font-family: "Lucida Sans", "Lucida Sans Regular", "Lucida  Grande", "Lucida Sans Unicode", Geneva, Verdana, sans-serif;
}

footer .fa-heart {
  color: red;
}

footer .fa-dev {
  color: #fff;
}

footer .fa-twitter-square {
  color: #1da0f1;
}

footer .fa-instagram {
  color: #f0007c;
}

fotter .fa-linkedin {
  color: #0073b1;
}

footer .fa-codepen {
  color: #fff;
}

footer a {
  color: #3c97bf;
  text-decoration: none;
  margin-right: 5px;
}

.youtubeBtn {
  position: fixed;
  left: 50%;
  transform: translatex(-50%);
  bottom: 45px;
  cursor: pointer;
  transition: all 0.3s;
  vertical-align: middle;
  text-align: center;
  display: inline-block;
}

.youtubeBtn i {
  font-size: 20px;
  float: left;
}

.youtubeBtn a {
  color: #ff0000;
  text-shadow: 0px 2px 5px rgba(0, 0, 0, 0.5);
  animation: youtubeAnim 1000ms linear infinite;
  float: right;
}

.youtubeBtn a:hover {
  color: #c9110f;
  transition: all 0.3s ease-in-out;
  text-shadow: none;
}

.youtubeBtn i:active {
  transform: scale(0.9);
  transition: all 0.3s ease-in-out;
}

.youtubeBtn span {
  font-family: "Lato";
  font-weight: bold;
  color: #fff;
  display: block;
  font-size: 12px;
  float: right;
  line-height: 20px;
  padding-left: 5px;
}

@keyframes youtubeAnim {
  0%, 100% {
    color: #c9110f;
  }
  50% {
    color: #ff0000;
  }
}
/* footer  */
</style>
</head>
<body>
  <ul class="menu">
   <li class="list"><a href="#">List 1 </a> 
      <ul class="items">
         <li><a href="#"> Item 1-1</a></li>
         <li><a href="#"> Item 1-2</a></li>
         <li><a href="#"> Item 1-3</a></li>
      </ul>
   </li>
   <li class="list"><a href="#">List 2</a> 
      <ul class="items">
         <li> <a href="#" > Item 2-1 </a></li>
         <li> <a href="#" > Item 2-2 </a></li>
         <li> <a href="#" > Item 2-3 </a></li>
      </ul>
   </li>
   <li class="list"><a href="#">List 3</a> 
      <ul class="items">
         <li> <a href="#" > Item 3-1 </a></li>
         <li> <a href="#" > Item 3-2 </a></li>
         <li> <a href="#" > Item 3-2 </a></li>
      </ul>
   </li>
   <li class="list"><a href="#">List 4</a> 
      <ul class="items">
         <li> <a href="#" > Item 4-1 </a></li>
         <li> <a href="#" > Item 4-2 </a></li>
         <li class="list"><a href="#">List 4-1</a> 
            <ul  class="items">
               <li> <a href="#" > Item 4-1-1</a></li>
               <li> <a href="#" > Item 4-1-2</a></li>
               <li class="list"><a href="#">List 4-2</a> 
                  <ul  class="items">
                     <li> <a href="#" > Item 4-2-1</a></li>
                     <li> <a href="#" > Item 4-2-2</a></li>
                  </ul>
               </li>
            </ul>
         </li>
      </ul>
   </li>
</ul>
<footer>
  <p>
		Created with <i class="fa fa-heart"></i> by
		<a target="_blank" href="https://codepen.io/ahmadbassamemran/">Ahmad Emran</a>
    Follow me : 
      <a target="_blank"  href="#"><i class="fab fa-instagram"></i></a>
    <a target="_blank"  href="#"><i class="fab fa-linkedin"></i></a>
    <a target="_blank" href="#"><i class="fab fa-codepen"></i></a> 
        <a target="_blank" href="#"><i class="fab fa-dev"></i></a> 
             <a target="_blank" href="#"><i class="fab fa-twitter-square"></i></a> 
	</p>
</footer>

<div class="youtubeBtn">
  <a target="_blank" href="#">
      <span>Watch on YouTube</span>
  <i class="fab fa-youtube"></i>
    </a>

</div>
    <script src="https://cpwebassets.codepen.io/assets/common/stopExecutionOnTimeout-1b93190375e9ccc259df3a57c1abc0e64599724ae30d7ea4c6877eb615f89387.js"></script>

      <script id="rendered-js" >
const list = document.querySelectorAll('.list');

function accordion(e) {
  e.stopPropagation();
  if (this.classList.contains('active')) {
    this.classList.remove('active');
  } else
  if (this.parentElement.parentElement.classList.contains('active')) {
    this.classList.add('active');
  } else
  {
    for (i = 0; i < list.length; i++) {if (window.CP.shouldStopExecution(0)) break;
      list[i].classList.remove('active');
    }window.CP.exitedLoop(0);
    this.classList.add('active');
  }
}
for (i = 0; i < list.length; i++) {if (window.CP.shouldStopExecution(1)) break;
  list[i].addEventListener('click', accordion);
}window.CP.exitedLoop(1);
//# sourceURL=pen.js
    </script>
</body>
</html>

6. By Ian Farb

Made by Ian Farb. Basic JavaScript accordion menu. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel='stylesheet' href='//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css'>
  
<style>
@import url(https://fonts.googleapis.com/css?family=Raleway:400,100,200,300,500,600,900,800,700);

@import url(https://fonts.googleapis.com/css?family=Roboto+Condensed:300italic,400italic,700italic,400,300,700);

* {
    margin: 0;
    padding: 0;
    list-style: none;
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
}

body {
    background: #666;
}

#wrap {
    width: 200px;
    margin: 30px auto 0 auto;
    overflow: hidden;
}

ul li a {
    display: block;
    padding: 10px;
    color:#fff;
    border-bottom:1px solid rgba(0,0,0,.075);
    text-decoration: none;
    font-family: 'Raleway', sans-serif;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size:18px;
    background:#148096;
    

    
}

ul li a:hover {
    background: #00B8D1;
}

.showMenu {
    display: block;
}

.submenu li a {
    text-transform: capitalize;
    background: #333;
    font-family: 'Roboto Condensed', sans-serif;
    font-weight: 100;
    padding: 6px 6px 6px 15px;
    font-size:14px;
    border:none;
}

.submenu li a:hover {
    background: #222;
}

.lines {
    font-size:30px;
    margin: -9px 0 0 0;
    float: right;
    opacity:.25;
    font-weight: 900;
}

.arrow {
    color:#666;
    margin: 0 5px 0 0;
    font-size: 14px;
}
</style>
</head>
<body>
  <div id="wrap">
    
        <ul>
        
            <li><a href="#">Home</a></li>
            <li class="dropdown projects">
                <a href="#">Projects<span class="lines">&#61;</span></a>
                <div class="submenu">
                    <ul>
                    <li><a href="#">Lorem</a></li>
                    <li><a href="#">Lorem</a></li>
                        <li><a href="#">Lorem</a></li>
                        </ul>
                
                </div>
            </li>
            <li class="dropdown services">
                <a href="#">Services<span class="lines">&#61;</span></a>
                <div class="submenu">
                    <ul>
                    <li><a href="#">Lorem</a></li>
                    <li><a href="#">Lorem</a></li>
                        <li><a href="#">Lorem</a></li>
                        <li><a href="#">Lorem</a></li>
                        </ul>
                
                </div>
            </li>
            <li><a href="#">About</a></li>
            <li><a href="#">Blog</a></li>
            
        </ul>
        
    </div>
  <script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js'></script>
      <script>
$(document).ready(function () {
  $('.submenu').hide();
  $('.projects a').click(function () {
    $('.projects .submenu').slideToggle('fast');
    $('.services .submenu').toggleClass('showmenu');

  });

  $('.services a').click(function () {
    $('.services .submenu').slideToggle('fast');
    $('.projects .submenu').toggleClass('showmenu');


  });

  $('.submenu a').prepend('<span class="arrow">&#10140;</span>');

});
    </script>
</body>
</html>

7. By Arkev

Made by Arkev. Vertical accordion menu using jQuery and CSS3. Source

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

<head>
  <meta charset="UTF-8">
  <title></title>
<!-- prefix free to deal with vendor prefixes -->
<script src="https://thecodeplayer.com/uploads/js/prefixfree-1.0.7.js" type="text/javascript" type="text/javascript"></script>
<!-- jQuery -->
<script src="https://thecodeplayer.com/uploads/js/jquery-1.7.1.min.js" type="text/javascript"></script>

<style>
/*custom font for text*/
@import url(https://fonts.googleapis.com/css?family=Nunito);
/*CSS file for fontawesome - an iconfont we will be using. This CSS file imported contains the font-face declaration. More info: https://fortawesome.github.io/Font-Awesome/ */
@import url(http://thecodeplayer.com/uploads/fonts/fontawesome/css/font-awesome.min.css);

/*Basic reset*/
* {margin: 0; padding: 0;}

body {
	background: #4EB889;
	font-family: Nunito, arial, verdana;
}
#accordian {
	background: #004050;
	width: 250px;
	margin: 100px auto 0 auto;
	color: white;
	/*Some cool shadow and glow effect*/
	box-shadow: 
		0 5px 15px 1px rgba(0, 0, 0, 0.6), 
		0 0 200px 1px rgba(255, 255, 255, 0.5);
}
/*heading styles*/
#accordian h3 {
	font-size: 12px;
	line-height: 34px;
	padding: 0 10px;
	cursor: pointer;
	/*fallback for browsers not supporting gradients*/
	background: #003040; 
	background: linear-gradient(#003040, #002535);
}
/*heading hover effect*/
#accordian h3:hover {
	text-shadow: 0 0 1px rgba(255, 255, 255, 0.7);
}
/*iconfont styles*/
#accordian h3 span {
	font-size: 16px;
	margin-right: 10px;
}
/*list items*/
#accordian li {
	list-style-type: none;
}
/*links*/
#accordian ul ul li a {
	color: white;
	text-decoration: none;
	font-size: 11px;
	line-height: 27px;
	display: block;
	padding: 0 15px;
	/*transition for smooth hover animation*/
	transition: all 0.15s;
}
/*hover effect on links*/
#accordian ul ul li a:hover {
	background: #003545;
	border-left: 5px solid lightgreen;
}
/*Lets hide the non active LIs by default*/
#accordian ul ul {
	display: none;
}
#accordian li.active ul {
	display: block;
}
</style>
</head>
<body>
  <div id="accordian">
	<ul>
		<li>
			<h3><span class="icon-dashboard"></span>Dashboard</h3>
			<ul>
				<li><a href="#">Reports</a></li>
				<li><a href="#">Search</a></li>
				<li><a href="#">Graphs</a></li>
				<li><a href="#">Settings</a></li>
			</ul>
		</li>
		<!-- we will keep this LI open by default -->
		<li class="active">
			<h3><span class="icon-tasks"></span>Tasks</h3>
			<ul>
				<li><a href="#">Today's tasks</a></li>
				<li><a href="#">Urgent</a></li>
				<li><a href="#">Overdues</a></li>
				<li><a href="#">Recurring</a></li>
				<li><a href="#">Settings</a></li>
			</ul>
		</li>
		<li>
			<h3><span class="icon-calendar"></span>Calendar</h3>
			<ul>
				<li><a href="#">Current Month</a></li>
				<li><a href="#">Current Week</a></li>
				<li><a href="#">Previous Month</a></li>
				<li><a href="#">Previous Week</a></li>
				<li><a href="#">Next Month</a></li>
				<li><a href="#">Next Week</a></li>
				<li><a href="#">Team Calendar</a></li>
				<li><a href="#">Private Calendar</a></li>
				<li><a href="#">Settings</a></li>
			</ul>
		</li>
		<li>
			<h3><span class="icon-heart"></span>Favourites</h3>
			<ul>
				<li><a href="#">Global favs</a></li>
				<li><a href="#">My favs</a></li>
				<li><a href="#">Team favs</a></li>
				<li><a href="#">Settings</a></li>
			</ul>
		</li>
	</ul>
</div>
      <script>
/*jQuery time*/
$(document).ready(function () {
  $("#accordian h3").click(function () {
    //slide up all the link lists
    $("#accordian ul ul").slideUp();
    //slide down the link list below the h3 clicked - only if its closed
    if (!$(this).next().is(":visible"))
    {
      $(this).next().slideDown();
    }
  });
});
    </script>
</body>
</html>

8. By Benjamin

Made by Benjamin. Sidebar JavaScript accordion menu. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
  <link rel='stylesheet' href='//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css'>
  
<style>
@import url('//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css');
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 300;
  font-stretch: normal;
  src: url(https://fonts.gstatic.com/s/opensans/v29/memSYaGs126MiZpBA-UvWbX2vVnXBbObj2OVZyOOSr4dVJWUgsiH0B4gaVc.ttf) format('truetype');
}
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  font-stretch: normal;
  src: url(https://fonts.gstatic.com/s/opensans/v29/memSYaGs126MiZpBA-UvWbX2vVnXBbObj2OVZyOOSr4dVJWUgsjZ0B4gaVc.ttf) format('truetype');
}
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 700;
  font-stretch: normal;
  src: url(https://fonts.gstatic.com/s/opensans/v29/memSYaGs126MiZpBA-UvWbX2vVnXBbObj2OVZyOOSr4dVJWUgsg-1x4gaVc.ttf) format('truetype');
}
body {
  color: #5D5F63;
  background: #293949;
  font-family: 'Open Sans', sans-serif;
  padding: 0;
  margin: 0;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}
.sidebar-toggle {
  margin-left: -240px;
}
.sidebar {
  width: 240px;
  height: 100%;
  background: #293949;
  position: absolute;
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  -ms-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
  z-index: 100;
}
.sidebar #leftside-navigation ul,
.sidebar #leftside-navigation ul ul {
  margin: -2px 0 0;
  padding: 0;
}
.sidebar #leftside-navigation ul li {
  list-style-type: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.sidebar #leftside-navigation ul li.active > a {
  color: #1abc9c;
}
.sidebar #leftside-navigation ul li.active ul {
  display: block;
}
.sidebar #leftside-navigation ul li a {
  color: #aeb2b7;
  text-decoration: none;
  display: block;
  padding: 18px 0 18px 25px;
  font-size: 12px;
  outline: 0;
  -webkit-transition: all 200ms ease-in;
  -moz-transition: all 200ms ease-in;
  -o-transition: all 200ms ease-in;
  -ms-transition: all 200ms ease-in;
  transition: all 200ms ease-in;
}
.sidebar #leftside-navigation ul li a:hover {
  color: #1abc9c;
}
.sidebar #leftside-navigation ul li a span {
  display: inline-block;
}
.sidebar #leftside-navigation ul li a i {
  width: 20px;
}
.sidebar #leftside-navigation ul li a i .fa-angle-left,
.sidebar #leftside-navigation ul li a i .fa-angle-right {
  padding-top: 3px;
}
.sidebar #leftside-navigation ul ul {
  display: none;
}
.sidebar #leftside-navigation ul ul li {
  background: #23313f;
  margin-bottom: 0;
  margin-left: 0;
  margin-right: 0;
  border-bottom: none;
}
.sidebar #leftside-navigation ul ul li a {
  font-size: 12px;
  padding-top: 13px;
  padding-bottom: 13px;
  color: #aeb2b7;
}
</style>
</head>
<body>
  <aside class="sidebar">
  <div id="leftside-navigation" class="nano">
    <ul class="nano-content">
      <li>
        <a href="index.html"><i class="fa fa-dashboard"></i><span>Dashboard</span></a>
      </li>
      <li class="sub-menu">
        <a href="javascript:void(0);"><i class="fa fa-cogs"></i><span>UI Elements</span><i class="arrow fa fa-angle-right pull-right"></i></a>
        <ul>

          <li><a href="ui-alerts-notifications.html">Alerts &amp; Notifications</a>
          </li>
          <li><a href="ui-panels.html">Panels</a>
          </li>
          <li><a href="ui-buttons.html">Buttons</a>
          </li>
          <li><a href="ui-slider-progress.html">Sliders &amp; Progress</a>
          </li>
          <li><a href="ui-modals-popups.html">Modals &amp; Popups</a>
          </li>
          <li><a href="ui-icons.html">Icons</a>
          </li>
          <li><a href="ui-grid.html">Grid</a>
          </li>
          <li><a href="ui-tabs-accordions.html">Tabs &amp; Accordions</a>
          </li>
          <li><a href="ui-nestable-list.html">Nestable Lists</a>
          </li>
        </ul>
      </li>
      <li class="sub-menu">
        <a href="javascript:void(0);"><i class="fa fa-table"></i><span>Tables</span><i class="arrow fa fa-angle-right pull-right"></i></a>
        <ul>
          <li><a href="tables-basic.html">Basic Tables</a>
          </li>

          <li><a href="tables-data.html">Data Tables</a>
          </li>
        </ul>
      </li>
      <li class="sub-menu">
        <a href="javascript:void(0);"><i class="fa fa fa-tasks"></i><span>Forms</span><i class="arrow fa fa-angle-right pull-right"></i></a>
        <ul>
          <li><a href="forms-components.html">Components</a>
          </li>
          <li><a href="forms-validation.html">Validation</a>
          </li>
          <li><a href="forms-mask.html">Mask</a>
          </li>
          <li><a href="forms-wizard.html">Wizard</a>
          </li>
          <li><a href="forms-multiple-file.html">Multiple File Upload</a>
          </li>
          <li><a href="forms-wysiwyg.html">WYSIWYG Editor</a>
          </li>
        </ul>
      </li>
      <li class="sub-menu active">
        <a href="javascript:void(0);"><i class="fa fa-envelope"></i><span>Mail</span><i class="arrow fa fa-angle-right pull-right"></i></a>
        <ul>
          <li class="active"><a href="mail-inbox.html">Inbox</a>
          </li>
          <li><a href="mail-compose.html">Compose Mail</a>
          </li>
        </ul>
      </li>
      <li class="sub-menu">
        <a href="javascript:void(0);"><i class="fa fa-bar-chart-o"></i><span>Charts</span><i class="arrow fa fa-angle-right pull-right"></i></a>
        <ul>
          <li><a href="charts-chartjs.html">Chartjs</a>
          </li>
          <li><a href="charts-morris.html">Morris</a>
          </li>
          <li><a href="charts-c3.html">C3 Charts</a></li>
        </ul>
      </li>
      <li class="sub-menu">
        <a href="javascript:void(0);"><i class="fa fa-map-marker"></i><span>Maps</span><i class="arrow fa fa-angle-right pull-right"></i></a>
        <ul>
          <li><a href="map-google.html">Google Map</a>
          </li>
          <li><a href="map-vector.html">Vector Map</a>
          </li>
        </ul>
      </li>
      <li class="sub-menu">
        <a href="typography.html"><i class="fa fa-text-height"></i><span>Typography</span></a>
      </li>
      <li class="sub-menu">
        <a href="javascript:void(0);"><i class="fa fa-file"></i><span>Pages</span><i class="arrow fa fa-angle-right pull-right"></i></a>
        <ul>
          <li><a href="pages-blank.html">Blank Page</a>
          </li>
          <li><a href="pages-login.html">Login</a>
          </li>
          <li><a href="pages-sign-up.html">Sign Up</a>
          </li>
          <li><a href="pages-calendar.html">Calendar</a>
          </li>
          <li><a href="pages-timeline.html">Timeline</a>
          </li>
          <li><a href="pages-404.html">404</a>
          </li>
          <li><a href="pages-500.html">500</a>
          </li>
        </ul>
      </li>
    </ul>
  </div>
</aside>
  <script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js'></script>
      <script>
$("#leftside-navigation .sub-menu > a").click(function (e) {
  $("#leftside-navigation ul ul").slideUp(), $(this).next().is(":visible") || $(this).next().slideDown(),
  e.stopPropagation();
});
    </script>
</body>
</html>