JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="accordion">
    <li class="active is-active">
        <h2 class="heading">Heading 1</h2>
        <div class="inner" style="display: block;">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum, magni, deleniti, excepturi, nisi eaque nulla facere quasi eveniet quos velit omnis sit corrupti labore dolore voluptatum veniam aliquid minima ab.</div>
    </li>
    <li>
        <h2 class="heading">Heading 2</h2>
        <div class="inner">
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum, magni, deleniti, excepturi, nisi eaque nulla facere quasi eveniet quos velit omnis sit corrupti labore dolore voluptatum veniam aliquid minima ab. Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
            <p>Dolorum, magni, deleniti, excepturi, nisi eaque nulla facere quasi eveniet quos velit omnis sit corrupti labore dolore voluptatum veniam aliquid minima ab. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum, magni, deleniti, excepturi, nisi eaque nulla facere quasi eveniet quos velit omnis sit corrupti labore dolore voluptatum veniam aliquid minima ab. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum, magni, deleniti, excepturi, nisi eaque nulla facere quasi eveniet quos velit omnis sit corrupti labore dolore voluptatum veniam aliquid minima ab.</p>
</div>
    </li>
    <li>
        <h2 class="heading">Heading 3</h2>
        <div class="inner">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum, magni, deleniti, excepturi, nisi eaque nulla facere quasi eveniet quos velit omnis sit corrupti labore dolore voluptatum veniam aliquid minima ab.</div>
    </li>
    <li>
        <h2 class="heading">Heading 4</h2>
        <div class="inner">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum, magni, deleniti, excepturi, nisi eaque nulla facere quasi eveniet quos velit omnis sit corrupti labore dolore voluptatum veniam aliquid minima ab.</div>
    </li>
    <li>
...

CSS

body {
  font-family: Arial;
}

h2 {
  text-transform: uppercase;
  font-size: 22px;
  background: grey;
  height: 40px;
  line-height: 40px;
  text-indent: 10px;
  color: white;
  cursor: pointer;
}

.accordion > li {
  margin-bottom: 1px;  
}

.accordion > li.is-active h2,
h2:hover {
  background: #191919;
}

.inner {
  display: none;
  padding: 10px;
}

p{
  padding: 5px 0;
}

JavaScript

var accordion = $('.accordion'),
    listItem = accordion.children('li'),
    heading = listItem.find('.heading'),
    content = listItem.find('.inner');

heading.on('click', function(e) {
  
  e.preventDefault();
  
  //if the clicked items parent doesnt have .is-active
  if( !$(this)
       .parent()
       .hasClass('is-active') 
    ) {
    
    //find the currently active li and hide its contents
    if( listItem.hasClass('is-active') ) {
      $('li.is-active')
        .find('.inner')
        .slideUp()
        .end()
        .removeClass('is-active');
    }
    
    $(this)
      .parent()
      .addClass('is-active')
      .end()
      .next(content)
      .slideToggle();
  }
  
});