JSFiddle - React, Tailwind, and code Playground

by Don Johnson

HTML

<ul class="questions">
  <li>
    <a href="# show content 1">Show answer</a>
    <div><p>Here is the answer</p></div>
  </li>
  <li>
    <a href="# show content 1">Show answer</a>
    <div><p>Here is the answer</p></div>
  </li>
  <li>
    <a href="# show content 1">Show answer</a>
    <div><p>Here is the answer</p></div>
  </li>
  <li>
    <a href="# show content 1">Show answer</a>
    <div><p>Here is the answer</p></div>
  </li>
  <li>
    <a href="# show content 1">Show answer</a>
    <div><p>Here is the answer</p></div>
  </li>
  <li>
    <a href="# show content 1">Show answer</a>
    <div><p>Here is the answer</p></div>
  </li>
</ul>

CSS

* {
	margin:0;
	padding:0;
}
ul {
	list-style:none;
}
li {
	border-bottom:solid 1px #d0d0d0;
	padding:2em;
}
li div {
	display:none;
}

JavaScript

$(function(){
	// prep the page
	$('ul li div').slideUp(1);
	// create an event listener
	$('ul.questions').on('click', ' li a', showAnswer);
});
var showAnswer = function (evt) {
	$this = $(this);
	if( $this.parents('li').hasClass('open') ){
		$this.siblings('div').slideUp(500).parents('li').removeClass('open');
	} else {				
		$('ul li.open').removeClass('open').find('div').slideUp(500);
		$this.siblings('div').slideDown(500).parents('li').addClass('open');
	}
	evt.preventDefault();
}