JSFiddle - React, Tailwind, and code Playground

by David Thomas

HTML

<section class="pro-further">
  <ul>
    <li><div onClick="furtherInfo(this);">Info one</div>
      <div id="test">Text for first info</div>
    </li>
    <li><div onClick="furtherInfo(this);">Info two</div>
      <div>Text for second info</div>
    </li>
    <li><div onClick="furtherInfo(this);">Info three</div>
      <div>Text for third info</div>
    </li>
    <li><div onClick="furtherInfo(this);">Info four</div>
      <div>Text for fourth info</div>
    </li>
    <li><div onClick="furtherInfo(this);">Info five</div>
      <div>Text for fifth info</div>
    </li>
    <li><div onClick="furtherInfo(this);">Info six</div>
      <div>Text for sixth info</div>
    </li>
  </ul>
</section>

CSS

.pro-further ul {
	width:100%;
	list-style-type:none;
    margin-left:0px;
}

.pro-further ul li > div {
	width:99.3%;
	font-size:14px;
	color:#FFF;
	background:url(../images/plus2.png) #23459F no-repeat 99% 50%;
	padding:6px 2px 6px 5px;
	margin-bottom:3px;
	cursor:pointer;
}

.pro-further ul li > div + div {
	width:98.5%;
	font-size:13px;
	color:#737373;
	background:white;
	border:1px solid #23459F;
	padding:2px 5px 2px 5px;
	margin-top:-3px;
	display:none;
	cursor:text;
}

JavaScript

var furtherInfo = function(el) {
	var openInfo = el.nextElementSibling;
  openInfo.style.display = openInfo.style.display == 'block' ? 'none' : 'block'
}