CSS only accordion with sliding effect

Accordions are useful when we have lots of content and limited amount of space to show. User can toggle between hiding and showing large amount of content. It increase the focus and readablity for content. We mostly use jQuery and Javascript to create accordion on webpages. It increase the dependcy on third party plugin or liabrary. Use of any plugin and liabrary increase the resource count and webpage size.

Benefit of using CSS over jQuery

1. All browsers have inbuilt support for css processing, therefore anythings written in CSS doesn’t require any liabrary to process.
2. Unlike jQuery CSS don’t have any version issue, which breaks its functionality.

CSS only accordion with all open | example of CSS only accordion

<nav>
   <input type="checkbox" id="groupchapter1" class="popupinput" checked="checked">
   <div class="practice-group  active">
      <h4><label for="groupchapter1">Array <i class="icon-chevron-arr down"></i></label></h4>
      <ul class="hiddenctrl chapterlist">
         <li class="" >
            <a href="#">
            One Dimentional Arrays
            <span>5 Mandatory</span>
            </a>
         </li>
         <li data-id="two-dimensional-arrays">
            <a class="completed" href="#">
            Two Dimensional Arrays
            <span>2 Mandatory</span></a>
         </li>
      </ul>
   </div>
   <input type="checkbox" id="groupchapter2" class="popupinput">
   <div class="practice-group ">
      <h4><label for="groupchapter2">Stacks <i class="icon-chevron-arr down"></i></label></h4>
      <ul class="hiddenctrl chapterlist">
         <li class="" >
            <a href="#">
            One Dimentional Arrays
            <span>5 Mandatory</span>
            </a>
         </li>
         <li data-id="two-dimensional-arrays">
            <a class="completed" href="#">
            Two Dimensional Arrays
            <span>2 Mandatory</span></a>
         </li>
         <li class="" data-id="multidimensional-arrays">
            <a href="#">Multidimensional Arrays
            <span>5 Mandatory</span>
            </a>
         </li>
      </ul>
   </div>
   <input type="checkbox" id="groupchapter3" class="popupinput">
   <div class="practice-group parent done end posrel">
      <h4><label for="groupchapter3">Queues <i class="icon-chevron-arr down"></i></label></h4>
      <ul class="hiddenctrl chapterlist">
         <li class="" >
            <a href="#">
            One Dimentional Arrays
            <span>5 Mandatory</span>
            </a>
         </li>
         <li data-id="two-dimensional-arrays">
            <a class="completed" href="#">
            Two Dimensional Arrays
            <span>2 Mandatory</span></a>
         </li>
         <li class="" data-id="multidimensional-arrays">
            <a href="#">Multidimensional Arrays
            <span>5 Mandatory</span>
            </a>
         </li>
      </ul>
   </div>
</nav>
<style type="text/css">
	input.popupinput {position: absolute; top: 0; left: 0; display: none; z-index: -1;}
	.practice-group h4 {background-color: #f7f7f7; padding: 16px; margin-bottom: 0; margin-top: 0;}
	.popupinput:checked + .practice-group, .popupinput:checked + .practice-group h4 {background-color: #cc3333;}
	.practice-group h4 > label {display: block; cursor: pointer; margin-bottom: 0;}
	.popupinput:checked + .practice-group > .chapterlist {max-height: 350px; background-color: #cc3333; padding-bottom: 20px;}
	ul.chapterlist {padding-left: 17px; transition: all 0.5s; max-height: 0; overflow: hidden; list-style: none; margin: 0; background-color: #f7f7f7;}
	ul.chapterlist a{color:#fff;}
</style>

CSS only accordion with one open only | example of css only accordion

<nav>
   <input type="radio" name="accordion" id="groupchapter1" class="popupinput" checked="checked">
   <div class="practice-group  active">
      <h4><label for="groupchapter1">Array <i class="icon-chevron-arr down"></i></label></h4>
      <ul class="hiddenctrl chapterlist">
         <li class="" >
            <a href="#">
            One Dimentional Arrays
            <span>5 Mandatory</span>
            </a>
         </li>
         <li data-id="two-dimensional-arrays">
            <a class="completed" href="#">
            Two Dimensional Arrays
            <span>2 Mandatory</span></a>
         </li>
      </ul>
   </div>
   <input type="radio" name="accordion" id="groupchapter2" class="popupinput">
   <div class="practice-group ">
      <h4><label for="groupchapter2">Stacks <i class="icon-chevron-arr down"></i></label></h4>
      <ul class="hiddenctrl chapterlist">
         <li class="" >
            <a href="#">
            One Dimentional Arrays
            <span>5 Mandatory</span>
            </a>
         </li>
         <li data-id="two-dimensional-arrays">
            <a class="completed" href="#">
            Two Dimensional Arrays
            <span>2 Mandatory</span></a>
         </li>
         <li class="" data-id="multidimensional-arrays">
            <a href="#">Multidimensional Arrays
            <span>5 Mandatory</span>
            </a>
         </li>
      </ul>
   </div>
   <input type="radio" name="accordion" id="groupchapter3" class="popupinput">
   <div class="practice-group parent done end posrel">
      <h4><label for="groupchapter3">Queues <i class="icon-chevron-arr down"></i></label></h4>
      <ul class="hiddenctrl chapterlist">
         <li class="">
            <a href="#">
            One Dimentional Arrays
            <span>5 Mandatory</span>
            </a>
         </li>
         <li data-id="two-dimensional-arrays">
            <a class="completed" href="#">
            Two Dimensional Arrays
            <span>2 Mandatory</span></a>
         </li>
         <li class="" data-id="multidimensional-arrays">
            <a href="#">Multidimensional Arrays
            <span>5 Mandatory</span>
            </a>
         </li>
      </ul>
   </div>
</nav>
<style>
	input.popupinput {position: absolute; top: 0; left: 0; display: none; z-index: -1;}
	.practice-group h4 {background-color: #f7f7f7; padding: 16px; margin-bottom: 0; margin-top: 0;}
	.popupinput:checked + .practice-group, .popupinput:checked + .practice-group h4 {background-color: #cc3333;}
	.practice-group h4 > label {display: block; cursor: pointer; margin-bottom: 0;}
	.popupinput:checked + .practice-group > .chapterlist {max-height: 350px; background-color: #cc3333; padding-bottom: 20px;}
	ul.chapterlist {padding-left: 17px; transition: all 0.5s; max-height: 0; overflow: hidden; list-style: none; margin: 0; background-color: #f7f7f7;}
	ul.chapterlist a{color:#fff;}
</style>