JSFiddle - React, Tailwind, and code Playground

HTML

<style>
  li {background:darkgray;color:snow;}
  li.on {background:white;color:black;}
  li div {display:none;}
</style>
<ul>
  <li class="on">
    내용을 보려면 li를 누른 후 버튼을 누르세요
    <button>btn</button>
    <div>Lorem ipsum dolor sit amet</div>
  </li>
  <li>
    내용을 보려면 li를 누른 후 버튼을 누르세요
    <button>btn</button>
    <div>Lorem ipsum dolor sit amet</div>
  </li>
  <li>
    내용을 보려면 li를 누른 후 버튼을 누르세요
    <button>btn</button>
    <div>Lorem ipsum dolor sit amet</div>
  </li>
  <li>
    내용을 보려면 li를 누른 후 버튼을 누르세요
    <button>btn</button>
    <div>Lorem ipsum dolor sit amet</div>
  </li>
</ul>

JavaScript

$('button').click(function() {
	if ($(this).parents('li').hasClass('on')) {
  	$(this).siblings('div').show();
  }
});

$('li').click(function() {
	if (!$(this).hasClass('on')) {
  	$('li').removeClass('on');
    $(this).addClass('on');
    $('div').hide();
  }
})