틀:사과 편집하기

<div class="collapsible-container">
  <button class="collapsible" style="background-color:#dc4343; color:white; width:100%; text-align:center; border: none; padding: 10px; font-size: 16px;">
    🍎 사과
  </button>
  <div class="content" style="display:none; background-color:#fff; color:#333;">
    <table class="wikitable" style="width:100%; border:2px solid #dc4343;">
      <tr>
        <th style="color:#fff; background-color:#dc4343; width:10%; text-align:center;">'''품종'''</th>
        <td style="background-color:#fff; text-align:left;">
          * [[감홍]]<br>
          * [[그래니 스미스]]<br>
          * [[매킨토시]]<br>
          * [[아리수]]<br>
          * [[아오리]]<br>
          * [[양광]]<br>
          * [[인도]]<br>
          * [[크립스 핑크]]<br>
          * [[홍옥]]<br>
          * [[홍로]]<br>
          * [[후지(부사)]]<br>
        </td>
      </tr>
      <tr>
        <th style="color:#fff; background-color:#dc4343; text-align:center;">'''관련 문서'''</th>
        <td style="background-color:#fff; text-align:left;">
          * [[애플 (영단어)]]<br>
          * [[풋사과]]<br>
          * [[사과주]]<br>
          * [[애플 브랜디]]<br>
          * [[캔디 애플]]<br>
          * [[사과 파이]]<br>
          * [[사과/문화]]<br>
          * [[사과나무]]<br>
          * [[ghost apple]]<br>
        </td>
      </tr>
    </table>
  </div>
</div>

<script>
  var coll = document.getElementsByClassName("collapsible");
  for (var i = 0; i < coll.length; i++) {
    coll[i].addEventListener("click", function() {
      var content = this.nextElementSibling;
      if (content.style.display === "block") {
        content.style.display = "none";
      } else {
        content.style.display = "block";
      }
    });
  }
</script>