JSFiddle - React, Tailwind, and code Playground

by grant

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
<div class="accordion-container">
  <a class="accordion-toggle" href="#"><span class="toggle-head"><h2 class="t-h2">Web Ready Lorem Ipsum - </h2>

</span><span class="toggle-icon"><i class="fa fa-plus"></i></span></a>
  <div class="accordion-content">
    <p>The images below provide examples of safe sleep environments that follow the safe sleep strategies explained in Safe to Sleep<sup>®</sup> materials.</p>
    <p>These low-resolution images are available for your convenience. If you choose to use the images, you are agreeing to: </p>
    <ul class="sts-bullet">
      <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
      <li>Duis malesuada purus sit amet tellus semper tempus.</li>
      <li>Etiam iaculis est ac erat mollis, vitae vulputate ante sagittis.</li>
      <li>Mauris interdum nulla interdum libero hendrerit interdum.</li>
      <li>Cras aliquet arcu vitae mattis congue.Cras aliquet arcu vitae mattis congue.</li>
      <li>Vivamus bibendum arcu vel enim luctus, eu dignissim erat efficitur.</li>
    </ul>
  </div>
</div>
<div class="accordion-container">
  <a class="accordion-toggle" href="#"><span class="toggle-head"><h2 class="t-h2">Web-Ready Lorem Ipsum is simply dummy text 2</h2>

</span><span class="toggle-icon"><i class="fa fa-plus"></i></span></a>
  <div class="accordion-content">
    <p>The images below provide examples of safe sleep environments that follow the safe sleep strategies explained in Safe to Sleep<sup>®</sup> materials.</p>
    <p>These low-resolution images are available for your convenience. If you choose to use the images, you are agreeing to: </p>
   ...

CSS

/*ACCORDION*/

.accordion-container {
  width: 100%;
  margin-top: 1em;
  /*clear: both;*/
}

.toggle-head {
  display: block;
  max-width: 95%;
  font-weight: 700;
}

.accordion-toggle {
  position: relative;
  display: block;
  padding: 10px;
  font-size: 1em;
  font-weight: 400;
  background: #f3f3f3;
  color: #000 !important;
  text-decoration: none !important;
}

.accordion-toggle.open {
  background: #f3f3f3;
  color: #fff;
}

.accordion-toggle:hover {
  background: #E8E8E8;
}

.accordion-toggle span.toggle-icon {
  position: absolute;
  right: .5em;
  font-size: 1.5em;
  color: #65308a;
  top: .5em;
}

.accordion-content {
  display: none;
  padding: 20px;
  overflow: auto;
  background-color: transparent;
}

JavaScript

$(document).ready(function() {
      var toggles = $('.accordion-toggle')
      toggles.on('click', function(event) {
           event.preventDefault();
           // create accordion variables
           var accordion = $(this);
           var accordionContent = accordion.next('.accordion-content');
           //// ...............
    var accordionToggleIcon = $(this).children('.toggle-icon');

    // toggle accordion link open class
    accordion.toggleClass("open");
    // toggle accordion content
    accordionContent.slideToggle(250);

    // change plus/minus icon
    if (accordion.hasClass("open")) {
      accordionToggleIcon.html("<i class='fa fa-minus'></i>");
    } else {
      accordionToggleIcon.html("<i class='fa fa-plus'></i>");
    }

  });
   // Fire click! /////////////////
      toggles.first().trigger('click');
      /////////////////////////////////
   
});