JSFiddle - React, Tailwind, and code Playground

by ckissi

HTML

<ul class='gdl-accordion'>
<li class='gdl-divider'>
<h2 class='accordion-head title-color gdl-title'><span class='accordion-head-image'></span>Another Person</h2>
<div class='accordion-content'>And their description below&#8230;</div>
</li>
  <li class='gdl-divider'>
<h2 class='accordion-head title-color gdl-title'><span class='accordion-head-image'></span>Another Person</h2>
<div class='accordion-content'>And their description below&#8230;</div>
</li>
  <li class='gdl-divider'>
<h2 class='accordion-head title-color gdl-title'><span class='accordion-head-image'></span>Another Person</h2>
<div class='accordion-content'>And their description below&#8230;</div>
</li>
<li class='gdl-divider'>
<h2 class='accordion-head title-color gdl-title'><span class='accordion-head-image'></span>Another Person</h2>
<div class='accordion-content'>And their description below&#8230;</div>
</li>
<li class='gdl-divider'>
<h2 class='accordion-head title-color gdl-title'><span class='accordion-head-image'></span>Another Person</h2>
<div class='accordion-content'>And their description below&#8230;</div>
</li>
<li class='gdl-divider'>
<h2 class='accordion-head title-color gdl-title'><span class='accordion-head-image'></span>Another Person</h2>
<div class='accordion-content'>And their description below&#8230;</div>
</li>
</ul>

JavaScript

jQuery("ul.gdl-accordion li").each(function(){

		jQuery(this).children(".accordion-content").css('height', function(){ 

			return jQuery(this).height(); 

		});

		

		if(jQuery(this).index() > 0){

			jQuery(this).children(".accordion-content").css('display','none');

		}else{

			jQuery(this).find(".accordion-head-image").addClass('active');

		}

		

		jQuery(this).children(".accordion-head").bind("click", function(){

			jQuery(this).children().addClass(function(){

				if(jQuery(this).hasClass("active")) return "";

				return "active";

			});

			jQuery(this).siblings(".accordion-content").slideToggle();

			jQuery(this).parent().siblings("li").children(".accordion-content").slideUp();

			jQuery(this).parent().siblings("li").find(".active").removeClass("active");

		});

	});