JSFiddle - React, Tailwind, and code Playground

by huuzoo

HTML

<ul class="cat">
  <li class="cat_li">
    <strong>カテゴリ1</strong>
    <p>カテゴリ1の説明カテゴリ1の説明<br>カテゴリ1の説明</p>
  </li>
  <li class="cat_li">
  <strong>カテゴリ2</strong>
    <p>カテゴリ2の説明カテゴリ2の説明<br>カテゴリ2の説明</p>
  </li>
</ul>

CSS

li.cat_li strong {
  cursor: pointer;
}
li.cat_li p {
  display: none;
}

JavaScript

var list_array = document.querySelectorAll('.cat_li');
for (var i=0; i< list_array.length; i++) {
    list_array[i].onclick = function() {
        this.lastElementChild.style.display = 'block';
    }
}