Show and hide collapsible table 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>
      <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/a/a8/Passau_Altstadt_Panorama_4.jpg/4000px-Passau_Altstadt_Panorama_4.jpg"/>
    </td>
  </tr>
</table>

</div>

CSS

div.container {
  width: 500px;
  background-color: pink;
  padding: 5px;
}

table {
  display: block; 
  overflow-x: auto; 
  width: 100%;
  border-collapse: collapse;
  border: 2px solid red;
}

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

table th {background-color: #ada;}
table td {background-color: #cdc;}

button {float: left;}

JavaScript

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