Multi level accordion

Multi level accordion

by Abhay Singh

HTML

<ul class="cd-accordion-menu animated">
		<li class="has-children">
			<input type="checkbox" name="group-1" id="group-1" checked="">
			<label for="group-1">Group 1</label>

      		<ul>
      			<li class="has-children">
      				<input type="checkbox" name="sub-group-1" id="sub-group-1">
					<label for="sub-group-1">Sub Group 1</label>

					<ul>
						<li><a href="#0">Image</a></li>
						<li><a href="#0">Image</a></li>
						<li><a href="#0">Image</a></li>
					</ul>
      			</li>
      			<li class="has-children">
      				<input type="checkbox" name="sub-group-2" id="sub-group-2">
					<label for="sub-group-2">Sub Group 2</label>

					<ul>
						<li class="has-children">
							<input type="checkbox" name="sub-group-level-3" id="sub-group-level-3">
							<label for="sub-group-level-3">Sub Group Level 3</label>

							<ul>
								<li><a href="#0">Image</a></li>
								<li><a href="#0">Image</a></li>
							</ul>
						</li>
						<li><a href="#0">Image</a></li>
					</ul>
      			</li>
      			<li><a href="#0">Image</a></li>
				<li><a href="#0">Image</a></li>
      		</ul>
		</li>

		<li class="has-children">
			<input type="checkbox" name="group-2" id="group-2">
			<label for="group-2">Group 2</label>

			<ul>
				<li><a href="#0">Image</a></li>
				<li><a href="#0">Image</a></li>
			</ul>
		</li>

		<li class="has-children">
			<input type="checkbox" name="group-3" id="group-3">
			<label for="group-3">Group 3</label>

			<ul>
				<li><a href="#0">Image</a></li>
				<li><a href="#0">Image</a></li>
			</ul>
		</li>

		<li class="has-children">
			<input type="checkbox" name="group-4" id="group-4">
			<label for="group-4">Group 4</label>

			<ul>
				<li class="has-children">
					<input type="checkbox" name="sub-group-3" id="sub-group-3">
					<label for="sub-group-3">Sub Group 3</label>

					<ul>
						<li><a href="#0">Image</a></li>
						<li><a href="#0">Image</a></li>
					</ul>
				</li>
				<li><a href="#0">Image</a></li>
				<li><a...

CSS

ul {
  list-style: none;
}

html {
  font-size: 60%;
}

body {
  font-family: sans-serif;
  color: #ffffff;
  background-color: #f0f0f0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

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

.cd-accordion-menu {
  width: 90%;
  max-width: 600px;
  background: #4d5158;
  margin: 4em auto;
  box-shadow: 0 4px 40px #70ac77;
}

.cd-accordion-menu ul {
  /* by default hide all sub menus */
  
  display: none;
}

.cd-accordion-menu li {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.cd-accordion-menu input[type=checkbox] {
  /* hide native checkbox */
  
  position: absolute;
  opacity: 0;
}

.cd-accordion-menu label,
.cd-accordion-menu a {
  position: relative;
  display: block;
  padding: 18px 18px 18px 64px;
  background: #4d5158;
  box-shadow: inset 0 -1px #565a60;
  color: #ffffff;
  font-size: 1.6rem;
}

.no-touch .cd-accordion-menu label:hover,
.no-touch .cd-accordion-menu a:hover {
  background: #52565d;
}

.cd-accordion-menu label::before,
.cd-accordion-menu label::after,
.cd-accordion-menu a::after {
  /* icons */
  
  content: '';
  display: inline-block;
  width: 16px;
  height: 16px;
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  transform: translateY(-50%);
}

.cd-accordion-menu label {
  cursor: pointer;
}

.cd-accordion-menu label::before,
.cd-accordion-menu label::after {
  background-image: url(https://codyhouse.co/demo/multi-level-accordion-menu/img/cd-icons.svg);
  background-repeat: no-repeat;
}

.cd-accordion-menu label::before {
  /* arrow icon */
  
  left: 18px;
  background-position: 0 0;
  -webkit-transform: translateY(-50%) rotate(-90deg);
  -moz-transform: translateY(-50%) rotate(-90deg);
  -ms-transform: translateY(-50%) rotate(-90deg);
  -o-transform: translateY(-50%)...