JSFiddle - React, Tailwind, and code Playground

by lollero

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<dl class="accordion">
  <dt>Item 1</dt>
  <dd>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laboriosam, ipsa!</dd>
  <dt>Item 2</dt>
  <dd>Lorem ipsum dolor sit amet.</dd>
  <dt>Item 3</dt>
  <dd>Lorem ipsum dolor sit amet.</dd>
  <dt>Item 4</dt>
  <dd>Lorem ipsum dolor sit amet.</dd>
</dl>

CSS

dl {
  margin: 0 auto; 
  width: 300px;
}

dt, dd {
  padding: 10px;
}

dt {
  cursor: pointer;
  margin-top: 3px;
  border-radius: 5px;
  background: #333;
  color: #fff;
}

dd {
  margin-left: 0px;
}


dt i {
  float: right;
}

dt {
  -webkit-touch-callout: none; /* iOS Safari */
  -webkit-user-select: none; /* Safari */
  -khtml-user-select: none; /* Konqueror HTML */
  -moz-user-select: none; /* Firefox */
  -ms-user-select: none; /* Internet Explorer/Edge */
  user-select: none; /* Non-prefixed version, currently
}

JavaScript

$('.accordion').find('dd').hide(0);

$('.accordion').find('dt').on("click", function() {

	var _this = $(this),
  		_active = _this.data().active;

	_this.data({ active: _active ? false : true });
  	
  var sh = _active ? "hide" : "show";
	_this.next().stop()[ sh ]( 400 );

});