JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href='https://fonts.googleapis.com/css?family=Open+Sans:400,600' rel='stylesheet' type='text/css'>
  
<h1>Wifire Accordion</h1>

<ul class="accordion">
	<li>

     
    <span>
      Content 1
    </span>
    		<a>Link
    <div class="arrow-container">
      <a class="arrow"></a>
    </div>
    </a>
        <span>
      Content 2
    </span>
        <span>
      Content 3
    </span>
   
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit, ipsum, fuga, in, obcaecati magni ullam nobis voluptas fugiat tenetur voluptatum quas tempora maxime rerum neque deserunt suscipit provident cumque et mollitia ex aspernatur porro minus sapiente voluptatibus eos at perferendis repellat odit aliquid harum molestias ratione pariatur adipisci. Aliquid, iure.</p>
	</li>
	<li>
		<a>Repellat Odit Aliquid </a>
    <span>Content 1</span><span>Content 2</span><span>Content 3</span><span>Content 4 Content 4 Content 4 Content 4 Content 4 Content 4</span>
     <div class="arrow-container">
      <a class="arrow"></a>
    </div>
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit, ipsum, fuga, in, obcaecati magni ullam nobis voluptas fugiat tenetur voluptatum quas tempora maxime rerum neque deserunt suscipit provident cumque et mollitia ex aspernatur porro minus sapiente voluptatibus eos at perferendis repellat odit aliquid harum molestias ratione pariatur adipisci. Aliquid, iure.</p>
	</li>
	<li>
		<a>Dolor sit Amet</a>
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit, ipsum, fuga, in, obcaecati magni ullam nobis voluptas fugiat tenetur voluptatum quas tempora maxime rerum neque deserunt suscipit provident cumque et mollitia ex aspernatur porro minus sapiente voluptatibus eos at perferendis repellat odit aliquid harum molestias ratione pariatur adipisci. Aliquid, iure.</p>
	</li>
</ul> <!-- / accordion -->

CSS

body {
  font-family: "Open Sans";
  font-size: 13px;
  font-size: 0.8125rem;
  font-weight: 300;
  color: #4a6e78;
}

h1 {
  text-align: center;
  font-size: 35px;
  font-size: 2.1875rem;
  line-height: 1.8;
  padding: 50px 0;
}

.accordion {
  max-width: 560px;
  margin: 0 auto 100px;
  border-top: 1px solid #d9e5e8;
}
.accordion li {
  border-bottom: 1px solid #d9e5e8;
  position: relative;
  padding: 10px 50px 10px 0;
  vertical-align: top;
}
.accordion li p {
  display: none;
  padding: 10px 25px 30px;
  color: #6b97a4;
}
.accordion a {
  display: inline-block;
  cursor: pointer;
  font-weight: 600;
  line-height: 1;
  font-size: 14px;
  font-size: 0.875rem;
  text-indent: 15px;
  user-select: none;
}
.accordion .arrow-container {
  display: inline-block;
  margin-left: 10px;
}
.accordion .arrow {
  width: 8px;
  height: 8px;
  border-right: 1px solid #4a6e78;
  border-bottom: 1px solid #4a6e78;
  transform: rotate(45deg);
  -webkit-transition: all 0.2s ease-in-out;
  -moz-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
}
.accordion p {
  font-size: 13px;
  font-size: 0.8125rem;
  line-height: 2;
  padding: 10px;
}

.accordion .arrow.active {
  transform: rotate(-135deg);
  -webkit-transition: all 0.2s ease-in-out;
  -moz-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
}

JavaScript

(function($) {
    $('.accordion > li:eq(0) a').addClass('active').next().slideDown();

    $('.accordion a').click(function(j) {
        var dropDown = $(this).closest('li').find('p');

        $(this).closest('.accordion').find('p').not(dropDown).slideUp();

        if ($(this).hasClass('active')) {
            $(this).removeClass('active');
        } else {
            $(this).closest('.accordion').find('a.active').removeClass('active');
            $(this).addClass('active');
        }

        dropDown.stop(false, true).slideToggle();

        j.preventDefault();
    });
})(jQuery);