<div class="container">
    <h1 class="title">게시판</h1>
    <div class="item">
      <input type="checkbox" id="tab1">
      <label for="tab1">내용 1</label>
      <div class="content">
        <p>본문본문본문본문본문본문</p>
      </div>
    </div>
    <div class="item">
      <input type="checkbox" id="tab2">
      <label for="tab2">내용 2</label>
      <div class="content">
        <p>안녕하세요~~~~~~~~~~~~~</p>
      </div>
    </div>
    <div class="item">
      <input type="checkbox" id="tab3">
      <label for="tab3">내용 3</label>
      <div class="content">
        <p>반갑습니다^^!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!</p>
      </div>
    </div>
  </div>
@font-face {
      font-family: 'GmarketSansMedium';
      src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansMedium.woff') format('woff');
      font-weight: normal;
      font-style: normal;
    }

    * {
      padding: 0;
      font-family: 'GmarketSansMedium', sans-serif;
    }

    .item {
      border-bottom: 1px solid #ddd;
      padding: 0.5rem;
    }

    input[type="checkbox"] {
      display: none;
    }

    label {
      display: block;
      cursor: pointer;
      font-size: 1.5rem;
    }

    label::after {
      content: "+";
      float: right;
      transition: 0.2s;
      font-size: 2rem;
    }

    input[type="checkbox"]:checked+label::after {
      transform: rotate(45deg);
    }

    .content {
      max-height: 0;
      overflow: hidden;
      transition: max-height 0.2s;
    }

    input[type="checkbox"]:checked+label+.content {
      max-height: 200px;
    }

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.