JSFiddle - React, Tailwind, and code Playground

by Vinit Divekar

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="accordion" id="accordion1">
  <div class="accordion-group">
    <div class="accordion-heading">
      <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion1" href="#collapseTwo" id="accordianHeader">
                Main Title <i class="fa fa-chevron-right" aria-hidden="true" id="IAmNew"></i>
            </a>
    </div>
    <div id="collapseTwo" class="accordion-body collapse">
      <div class="accordion-inner">
        <div class="accordion" id="accordion2">
          <div class="accordion-group mtb-10">
            <div class="accordion-heading">
              <a class="accordion-toggle font-weight-bold" data-toggle="collapse" data-parent="#accordion2" href="#collapseInnerOne">
                                Inner Title One <i class="fa fa-chevron-right" aria-hidden="true"></i>
                            </a>
            </div>
            <div id="collapseInnerOne" class="accordion-body collapse in">
              <div class="accordion-inner">

              </div>
            </div>
          </div>
          <div class="accordion-group mtb-10">
            <div class="accordion-heading">
              <a class="accordion-toggle font-weight-bold" data-toggle="collapse" data-parent="#accordion2" href="#collapseInnerTwo">
                                Inner Title Two <i class="fa fa-chevron-right" aria-hidden="true"></i>
                            </a>
            </div>
            <div id="collapseInnerTwo" class="accordion-body collapse">
              <div class="accordion-inner">

             ...

JavaScript

$('.accordion').on('show.bs.collapse hide.bs.collapse', function (e) {
    $(this).find('i').first().toggleClass('fa-chevron-right fa-chevron-down');
});