JSFiddle - React, Tailwind, and code Playground

by Rolf

HTML

<header>
Audio-Bibel
<div id="neue">
<img src="https://forum.selfhtml.org/images/09869fd4-be98-11e9-a24c-b42e9947ef30.png?size=medium">
NeÜ
<img src="https://forum.selfhtml.org/images/21849b68-be98-11e9-8393-b42e9947ef30.png?size=medium">

</div>  
</header>
<h1>
Das alte Testament <a href="#"><img src="https://www.audiobibelneü.de/img/zip.png" alt="Download"></a>
</h1>
<h2>
<span>Die geschichtlichen Bücher</span>
<button class="expand" aria-controls="at-hist" aria-expanded="false">
<span>▼ anzeigen</span>
<span>▲ verbergen</span>
</button>
</h2>
<table id="at-hist">
<tr>
<th>Info</th>
<th>Download einzelner Kapitel unkomprimiert</th>
<th>Buch komplett im ZIP-Format</th>
<th>Aufnahme</th>
</tr>
<tr>
<td><a href=""><img src="https://www.audiobibelneü.de/img/info.png" alt="Info"></a></td>
<td>1. Buch Mose: Genesis</td>
<td><img src="https://www.audiobibelneü.de/img/zip.png"></td>
<td>12.34.1278</td>
</tr>
<tr>
<td><a href=""><img src="https://www.audiobibelneü.de/img/info.png" alt="Info"></a></td>
<td>2. Buch Mose: Exodus</td>
<td><img src="https://www.audiobibelneü.de/img/zip.png"></td>
<td>12.34.1278</td>
</tr>
<tr>
<td><a href=""><img src="https://www.audiobibelneü.de/img/info.png" alt="Info"></a></td>
<td>3. Buch Mose: Leviticus</td>
<td><img src="https://www.audiobibelneü.de/img/zip.png"></td>
<td>12.34.1278</td>
</tr>
</table>

<h2>
<span>Die poetischen Bücher</span>
<button class="expand" aria-controls="at-poet" aria-expanded="false">
<span>▼ anzeigen</span>
<span>▲ verbergen</span>
</button>
</h2>
<table id="at-poet">
<tr>
<th>Info</th>
<th>Download einzelner Kapitel unkomprimiert</th>
<th>Buch komplett im ZIP-Format</th>
<th>Aufnahme</th>
</tr>
<tr>
<td><a href=""><img src="https://www.audiobibelneü.de/img/info.png" alt="Info"></a></td>
<td>1. Buch Mose: Genesis</td>
<td><img src="https://www.audiobibelneü.de/img/zip.png"></td>
<td>12.34.1278</td>
</tr>
<tr>
<td><a href=""><img src="https://www.audiobibelneü.de/img/info.png" alt="Info"></a></td>
<td>2....

CSS

html {
  padding: 0 4px;
}
body {
  max-width: 50rem;
  margin: auto;
}
header {
  font: bold italic 10vw serif;
  text-align: center;
  border-bottom: 1px solid #800;
}
@media (min-width: 50em) {
  header {
    font-size: 5em;
  }
}
#neue {
  display: flex;
  justify-content: center;
  align-items: center;
  color: red;
}
#neue img {
  max-width: 200px;
  width: 25vw;
}

h1, h2 > span, h2 .expand {
  border-radius: 8px;
  border: 1px solid #a8a8a8;
  padding: 0 8px;
}
h1 {
  background-color: #A6BFDB;
  font: bold 1.5rem serif;
  margin: 6px 2px;
}

h2 {
  font: bold 1.3rem serif;
  display: flex;
  margin: 3px 2px;
}
h2 > span {
  flex: 1 0 auto;
  background-color: #A6BFDB;
}

h2 .expand {
  font: normal 1rem serif;
  flex: 0 0 7em;
  background-color: #A6BFDB;
  border: none;
  margin-left: 2px;
  padding: 1px;
  box-sizing: content-box;
}

h2 .expand[aria-expanded=true] span:nth-child(1),
h2 .expand[aria-expanded=false] span:nth-child(2) {
  display: none;
}

table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 2px;
}

table:not(.visible) {
  display: none;
}
th,td {
  text-align: center;
  background-color: #A6BFDB;
  border-radius: 8px;
  border: 1px solid #a8a8a8;
  vertical-align: middle;
  font: normal 1rem serif;
}

th:nth-of-type(2), td:nth-of-type(2) {
  padding: 0 6px;
  text-align: left;
}

th:nth-of-type(4) {
  width: 7em;
}

JavaScript

document.body.addEventListener("click", expandController);

function expandController(e) {
   var button = e.target;
   if (button.tagName == "SPAN")
      button = button.parentNode;
   if (button == null || button.tagName != "BUTTON")
      return
      
   var controlledBooks,
       controlledBooksName = button.getAttribute("aria-controls");
       
   if (controlledBooksName)
      controlledBooks = document.getElementById(controlledBooksName);
   if (!controlledBooks)
      return;
   
   var expanded = button.getAttribute("aria-expanded") == "true";
   
   if (expanded)
      controlledBooks.classList.remove("visible");
   else
      controlledBooks.classList.add("visible");
   button.setAttribute("aria-expanded", !expanded);
}