JSFiddle - React, Tailwind, and code Playground

by learningforever

HTML

<div class="layer1">
<p>
요약문1
</p>
<p class="heading">자세히 보기</p>
<div class="content">첫 번째 컨텐츠<br>첫 번째 컨텐츠</div>
<p>
요약문2
</p>
<p class="heading">자세히 보기</p>
<div class="content">두 번째 컨텐츠<br>두 번째 컨텐츠</div>
<p class="heading">제목 3</p>
<div class="content">세 번째 컨텐츠<br>세 번째 컨텐츠</div>
</div>

CSS

.layer1 {
margin: 0;
padding: 0;
width: 500px;
}

.heading {
margin: 1px;
color: #fff;
padding: 3px 10px;
cursor: pointer;
position: relative;
background-color:#c30;
}
.content {
padding: 5px 10px;
background-color:#fafafa;
}
p { padding: 5px 0; }

JavaScript

$(document).ready(function() {
  $(".content").hide();
  //content 클래스를 가진 div를 표시/숨김(토글)
  $(".heading").click(function()
  {
    $(this).next(".content").slideToggle(500);
  });
});