Show and hide a collapsible table section

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;
  table-layout: fixed; 
}
    table th {
      width: 200px;
    }

    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;
      }
    });