Show and hide collapsible content

by watchduck

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<div class="container">
  <table>
    <tr>
      <th>
        <button>hide</button>
        <a href="https://commons.wikimedia.org/wiki/File:Passau_Altstadt_Panorama_4.jpg">
          Panorama of Passau
        </a> by Aconcagua
      </th>
    </tr>
    <tr id="collapsible">
      <td>
        <div class="scroll-wrapper">
          <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/a/a8/Passau_Altstadt_Panorama_4.jpg/4000px-Passau_Altstadt_Panorama_4.jpg"/>
        </div>
      </td>
    </tr>
  </table>
</div>

CSS

div.container {
      width: 100%;
      max-width: 100%;
      background-color: pink;
      padding: 5px;
    }

    table {
      width: 100%;
      border-collapse: collapse;
      border: 2px solid red;
    }

    table td, table th {
      border: 2px solid green;
      padding: 5px;
    }

    table th {
      background-color: #ada;
      text-align: center;
    }

    table td {
      background-color: #cdc;
    }

    /* هنا السحر */
    .scroll-wrapper {
      width: 100%;
      overflow-x: auto;
    }

    .scroll-wrapper img {
      display: block;
      max-height: 300px;
    }

    button {
      float: left;
    }

JavaScript

let collapsed = false;
    $("button").on("click", function (event) {
      event.preventDefault();
      if (collapsed) {
        $("#collapsible").show();
        $("button").html("hide");
        collapsed = false;
      } else {
        $("#collapsible").hide();
        $("button").html("show");
        collapsed = true;
      }
    });