JSFiddle - React, Tailwind, and code Playground

by huuzoo

HTML

<div id="block">
  <p>議題1</p>
  <ul id="list1">
    <li id="about_a">
      <strong>Aについて</strong>
      <p>Aの説明文Aの説明文Aの説明文</p>
     </li>
    <li id="about_b">
      <strong>Bについて</strong>
      <p>Bの説明文Bの説明文Bの説明文</p>
    </li>
    <li id="about_c">
      <strong>Cについて</strong>
      <p>Cの説明文Cの説明文Cの説明文</p>  
    </li>
  </ul>
</div>

CSS

#block li strong {
  cursor: pointer;
}
#block li p {
  display: none;
}

JavaScript

var list = document.getElementsByTagName("li");
for(var i=0; i<list.length; i++) {
	list[i].onclick = function() {
		this.lastElementChild.style.display = 'block';
	}
}