JSFiddle - React, Tailwind, and code Playground

by Muthuraman B

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="col-md-12 col-sm-12 col-xs-12 mt15">
  <!-- 1. accordion start -->
  <div class="accordion">
    <div class="col-md-10 col-sm-10 col-xs-10">
      <h2>Accordion Head 1</h2>
    </div>
    <span class="arrow"><i class="glyphicon glyphicon-chevron-right"></i></span>
    <div class="clear"></div>
  </div>
  <div class="accordion_body">  
    <div class="col-md-12 col-sm-12 col-xs-12">
      <h2>Accordion Body 1</h2>
    </div>
  </div>
  <!-- 1. accordion end -->
  <!-- 2. accordion start -->
  <div class="accordion">
    <div class="col-md-10 col-sm-10 col-xs-10">
      <h2>Accordion Head 2</h2>
    </div>
    <span class="arrow"><i class="glyphicon glyphicon-chevron-right"></i></span>
    <div class="clear"></div>
  </div>
  <div class="accordion_body">  
    <div class="col-md-12 col-sm-12 col-xs-12">
      <h2>Accordion Body 2</h2>
    </div>
  </div>
  <!-- 2. accordion end -->
  <!-- 3. accordion start -->
  <div class="accordion">
    <div class="col-md-10 col-sm-10 col-xs-10">
      <h2>Accordion Head 3</h2>
    </div>
    <span class="arrow"><i class="glyphicon glyphicon-chevron-right"></i></span>
    <div class="clear"></div>
  </div>
  <div class="accordion_body">  
    <div class="col-md-12 col-sm-12 col-xs-12">
      <h2>Accordion Body 3</h2>
    </div>
  </div>
  <!-- 3. accordion end -->
</div>

CSS

.mt15 {margin-top:15px;}
.accordion {width:100%;background-color: #fafafa;border-left: solid 4px #48a3d7;cursor: pointer;display: flex;margin-top:2px;}
.accordion h2, .accordion_body h2 {margin:0;}
.arrow {margin: auto 15px auto auto;}
.accordion_body {display:none;padding:0 15px;}

JavaScript

// JavaScript Document
$(document).ready(function () {
  //toggle the component with class accordion_body
  $(".accordion").click(function () {   
    if($(this).next(".accordion_body").is(':visible')) {
      $(this).next(".accordion_body").slideUp(300);
      $(this).children(".arrow").html('<i class="glyphicon glyphicon-chevron-right"></i>');
    } else {
      $(this).next(".accordion_body").slideDown(300);
      $(this).children(".arrow").html('<i class="glyphicon glyphicon-chevron-down"></i>');
    }
  });
});