Simple Accordion using Jquery

In this tutorial, I'll show you how to make Simple Accordion using Jquery.

Click Here for DEMO

First thing, we need HTML to create panel head containing according title and panel body containing content for accordion. Here is the code:

HTML
<h2>Simple Accordion using Jquery</h2>
<div class="accordion">
   <div class="panel">
      <div class="panel-head active">
         <a href="#">Accordion Title</a>
      </div>
      <div class="panel-body">
         <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus earum ad ducimus, sint ipsum veritatis quidem saepe recusandae beatae eos officiis sed rem. Praesentium molestias asperiores vel unde distinctio nemo?</p>
      </div>
   </div>
   <div class="panel">
      <div class="panel-head">
         <a href="#">Accordion Title</a>
      </div>
      <div class="panel-body">
         <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores dignissimos, ea, porro optio provident commodi qui, harum delectus nihil aliquam dolor totam quae, sunt reprehenderit autem suscipit consequuntur quam perferendis?</p>
      </div>
   </div>
   <div class="panel">
      <div class="panel-head">
         <a href="#">Accordion Title</a>
      </div>
      <div class="panel-body">
         <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minus aperiam praesentium, dolore eveniet sit. Veritatis fugit, dicta ducimus vero, ut ab quas sed molestias qui. Non magnam earum alias nihil.</p>
      </div>
   </div>
   <div class="panel">
      <div class="panel-head">
         <a href="#">Accordion Title</a>
      </div>
      <div class="panel-body">
         <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus minima unde, cupiditate, natus quia quas consequatur ab quae, consequuntur quisquam, architecto nam omnis! Quae, corporis reiciendis et! Cupiditate, sequi, unde.</p>
      </div>
   </div>
</div>

Then, we need CSS to style up the things. Here I use SCSS so I'll share you SCSS code.
SCSS
.accordion{
   .panel-head{
      a{
         background: #1e9f75;
         color: #fff;
         display: block;
         padding: 10px 50px 10px 20px;
         text-decoration: none;
         position: relative;

         &:hover{
            opacity: 0.8;
         }

         &:after{
            content: '+';
            position: absolute;
            top: 50%;
            right: 20px;
            transform: translateY(-50%);
            -webkit-transform: translateY(-50%);
         }
      }

      &.active{
         a{
            opacity: 0.8;

            &:after{
               content: '-';
            }
         }
      }
   }

   .panel-body{
      border: 1px solid #1e9f75;
      padding: 15px 20px;
   }
}

Finally, we need Jquery Code to make simple accordion for your project. So, here's the Jquery below.
Jquery
$(function(){
 var panelBody = $('.accordion .panel-body');
 panelBody.hide();
 panelBody.first().show();
 $('.accordion .panel-head').on('click', 'a', function(){
  panelBody.slideUp('fast');
  $(this).closest('.panel-head').next().slideDown('fast');
  $('.active').removeClass('active');
  $(this).closest('.panel-head').addClass('active');
  return false;
 });
});

I hope this is working well. If you have any thought or any new sharing, feel free to comment below.

Cheers!!

Share this

Related Posts