https://exmediawiki.khm.de/index.php?action=history&feed=atom&title=Materialseite 2026-04-24T18:49:10Z Versionsgeschichte dieser Seite in exmediawiki MediaWiki 1.43.5 https://exmediawiki.khm.de/index.php?title=Materialseite&diff=10355&oldid=prev 2025-05-26T12:46:54Z

<p></p> <a href="https://exmediawiki.khm.de/index.php?title=Materialseite&amp;diff=10355&amp;oldid=10348">Änderungen zeigen</a>

Theo https://exmediawiki.khm.de/index.php?title=Materialseite&diff=10348&oldid=prev 2025-05-26T12:34:24Z

<p></p> <table style="background-color: #fff; color: #202122;" data-mw="interface"> <col class="diff-marker" /> <col class="diff-content" /> <col class="diff-marker" /> <col class="diff-content" /> <tr class="diff-title" lang="de"> <td colspan="2" style="background-color: #fff; color: #202122; text-align: center;">← Nächstältere Version</td> <td colspan="2" style="background-color: #fff; color: #202122; text-align: center;">Version vom 26. Mai 2025, 14:34 Uhr</td> </tr><tr><td colspan="2" class="diff-lineno" id="mw-diff-left-l118">Zeile 118:</td> <td colspan="2" class="diff-lineno">Zeile 118:</td></tr> <tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><br></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><br></td></tr> <tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>&lt;/div&gt;</div></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>&lt;/div&gt;</div></td></tr> <tr><td class="diff-marker" data-marker="−"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div><del style="font-weight: bold; text-decoration: none;"></del></div></td><td colspan="2" class="diff-side-added"></td></tr> <tr><td class="diff-marker" data-marker="−"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div><del style="font-weight: bold; text-decoration: none;">&lt;script&gt;</del></div></td><td colspan="2" class="diff-side-added"></td></tr> <tr><td class="diff-marker" data-marker="−"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div><del style="font-weight: bold; text-decoration: none;">document.addEventListener('DOMContentLoaded', function() {</del></div></td><td colspan="2" class="diff-side-added"></td></tr> <tr><td class="diff-marker" data-marker="−"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div><del style="font-weight: bold; text-decoration: none;">  // Get all toggle buttons</del></div></td><td colspan="2" class="diff-side-added"></td></tr> <tr><td class="diff-marker" data-marker="−"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div><del style="font-weight: bold; text-decoration: none;">  const toggleButtons = document.querySelectorAll('.toggle-button');</del></div></td><td colspan="2" class="diff-side-added"></td></tr> <tr><td class="diff-marker" data-marker="−"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div><del style="font-weight: bold; text-decoration: none;">  const contentSections = document.querySelectorAll('.content-section');</del></div></td><td colspan="2" class="diff-side-added"></td></tr> <tr><td class="diff-marker" data-marker="−"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div><del style="font-weight: bold; text-decoration: none;">  let currentlyOpen = null;</del></div></td><td colspan="2" class="diff-side-added"></td></tr> <tr><td class="diff-marker" data-marker="−"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div><del style="font-weight: bold; text-decoration: none;"></del></div></td><td colspan="2" class="diff-side-added"></td></tr> <tr><td class="diff-marker" data-marker="−"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div><del style="font-weight: bold; text-decoration: none;">  toggleButtons.forEach(function(button) {</del></div></td><td colspan="2" class="diff-side-added"></td></tr> <tr><td class="diff-marker" data-marker="−"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div><del style="font-weight: bold; text-decoration: none;">    button.addEventListener('click', function() {</del></div></td><td colspan="2" class="diff-side-added"></td></tr> <tr><td class="diff-marker" data-marker="−"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div><del style="font-weight: bold; text-decoration: none;">      const targetId = this.getAttribute('data-target');</del></div></td><td colspan="2" class="diff-side-added"></td></tr> <tr><td class="diff-marker" data-marker="−"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div><del style="font-weight: bold; text-decoration: none;">      const targetContent = document.getElementById(targetId);</del></div></td><td colspan="2" class="diff-side-added"></td></tr> <tr><td class="diff-marker" data-marker="−"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div><del style="font-weight: bold; text-decoration: none;">      </del></div></td><td colspan="2" class="diff-side-added"></td></tr> <tr><td class="diff-marker" data-marker="−"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div><del style="font-weight: bold; text-decoration: none;">      // If clicking the same button that's already open, close it</del></div></td><td colspan="2" class="diff-side-added"></td></tr> <tr><td class="diff-marker" data-marker="−"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div><del style="font-weight: bold; text-decoration: none;">      if (currentlyOpen === targetId) {</del></div></td><td colspan="2" class="diff-side-added"></td></tr> <tr><td class="diff-marker" data-marker="−"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div><del style="font-weight: bold; text-decoration: none;">        targetContent.style.display = 'none';</del></div></td><td colspan="2" class="diff-side-added"></td></tr> <tr><td class="diff-marker" data-marker="−"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div><del style="font-weight: bold; text-decoration: none;">        currentlyOpen = null;</del></div></td><td colspan="2" class="diff-side-added"></td></tr> <tr><td class="diff-marker" data-marker="−"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div><del style="font-weight: bold; text-decoration: none;">        return;</del></div></td><td colspan="2" class="diff-side-added"></td></tr> <tr><td class="diff-marker" data-marker="−"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div><del style="font-weight: bold; text-decoration: none;">      }</del></div></td><td colspan="2" class="diff-side-added"></td></tr> <tr><td class="diff-marker" data-marker="−"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div><del style="font-weight: bold; text-decoration: none;">      </del></div></td><td colspan="2" class="diff-side-added"></td></tr> <tr><td class="diff-marker" data-marker="−"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div><del style="font-weight: bold; text-decoration: none;">      // Hide all content sections</del></div></td><td colspan="2" class="diff-side-added"></td></tr> <tr><td class="diff-marker" data-marker="−"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div><del style="font-weight: bold; text-decoration: none;">      contentSections.forEach(function(section) {</del></div></td><td colspan="2" class="diff-side-added"></td></tr> <tr><td class="diff-marker" data-marker="−"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div><del style="font-weight: bold; text-decoration: none;">        section.style.display = 'none';</del></div></td><td colspan="2" class="diff-side-added"></td></tr> <tr><td class="diff-marker" data-marker="−"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div><del style="font-weight: bold; text-decoration: none;">      });</del></div></td><td colspan="2" class="diff-side-added"></td></tr> <tr><td class="diff-marker" data-marker="−"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div><del style="font-weight: bold; text-decoration: none;">      </del></div></td><td colspan="2" class="diff-side-added"></td></tr> <tr><td class="diff-marker" data-marker="−"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div><del style="font-weight: bold; text-decoration: none;">      // Show the target content</del></div></td><td colspan="2" class="diff-side-added"></td></tr> <tr><td class="diff-marker" data-marker="−"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div><del style="font-weight: bold; text-decoration: none;">      targetContent.style.display = 'block';</del></div></td><td colspan="2" class="diff-side-added"></td></tr> <tr><td class="diff-marker" data-marker="−"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div><del style="font-weight: bold; text-decoration: none;">      currentlyOpen = targetId;</del></div></td><td colspan="2" class="diff-side-added"></td></tr> <tr><td class="diff-marker" data-marker="−"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div><del style="font-weight: bold; text-decoration: none;">    });</del></div></td><td colspan="2" class="diff-side-added"></td></tr> <tr><td class="diff-marker" data-marker="−"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div><del style="font-weight: bold; text-decoration: none;">  });</del></div></td><td colspan="2" class="diff-side-added"></td></tr> <tr><td class="diff-marker" data-marker="−"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div><del style="font-weight: bold; text-decoration: none;">});</del></div></td><td colspan="2" class="diff-side-added"></td></tr> <tr><td class="diff-marker" data-marker="−"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div><del style="font-weight: bold; text-decoration: none;">&lt;/script&gt;</del></div></td><td colspan="2" class="diff-side-added"></td></tr> </table>

Theo https://exmediawiki.khm.de/index.php?title=Materialseite&diff=10337&oldid=prev 2025-05-26T12:04:50Z

<p>Die Seite wurde neu angelegt: „__NOTOC__ &lt;h2&gt;Materials&lt;/h2&gt; &lt;br&gt; &lt;h4&gt;Natural materials&lt;/h4&gt; &lt;!-- Main container --&gt; &lt;div style=&quot;display: flex; flex-wrap: wrap; gap: 0.5em; align-items: fle…“</p> <p><b>Neue Seite</b></p><div>__NOTOC__<br /> <br /> &lt;h2&gt;Materials&lt;/h2&gt;<br /> &lt;br&gt;<br /> &lt;h4&gt;Natural materials&lt;/h4&gt;<br /> <br /> &lt;!-- Main container --&gt;<br /> &lt;div style=&quot;display: flex; flex-wrap: wrap; gap: 0.5em; align-items: flex-start; width: 100%; max-width: 100%; box-sizing: border-box; overflow: hidden;&quot;&gt;<br /> <br /> &lt;!-- Toggle buttons container --&gt;<br /> &lt;div id=&quot;toggle-buttons&quot; style=&quot;display: flex; flex-wrap: wrap; gap: 0.5em; width: 100%;&quot;&gt;<br /> <br /> &lt;!-- Holz toggle button --&gt;<br /> &lt;div class=&quot;toggle-button&quot; data-target=&quot;holz-content&quot; style=&quot;cursor: pointer;&quot;&gt;<br /> &lt;div style=&quot;background-color: black; border-radius: 9999px; padding: 0.5em 2em; text-align: center; display: inline-block; margin-top: 0.5em;&quot;&gt;<br /> &lt;h3 style=&quot;color: white; margin: 0;&quot;&gt;Holz&lt;/h3&gt;<br /> &lt;/div&gt;<br /> &lt;/div&gt;<br /> <br /> &lt;!-- Metalle toggle button --&gt;<br /> &lt;div class=&quot;toggle-button&quot; data-target=&quot;metalle-content&quot; style=&quot;cursor: pointer;&quot;&gt;<br /> &lt;div style=&quot;background-color: black; border-radius: 9999px; padding: 0.5em 2em; text-align: center; display: inline-block; margin-top: 0.5em;&quot;&gt;<br /> &lt;h3 style=&quot;color: white; margin: 0;&quot;&gt;Metalle&lt;/h3&gt;<br /> &lt;/div&gt;<br /> &lt;/div&gt;<br /> <br /> &lt;!-- Kunststoffe toggle button --&gt;<br /> &lt;div class=&quot;toggle-button&quot; data-target=&quot;kunststoffe-content&quot; style=&quot;cursor: pointer;&quot;&gt;<br /> &lt;div style=&quot;background-color: black; border-radius: 9999px; padding: 0.5em 2em; text-align: center; display: inline-block; margin-top: 0.5em;&quot;&gt;<br /> &lt;h3 style=&quot;color: white; margin: 0;&quot;&gt;Kunststoffe&lt;/h3&gt;<br /> &lt;/div&gt;<br /> &lt;/div&gt;<br /> <br /> &lt;/div&gt;<br /> <br /> &lt;!-- Content sections container --&gt;<br /> &lt;div id=&quot;content-sections&quot; style=&quot;width: 100%; margin-top: 1em;&quot;&gt;<br /> <br /> &lt;!-- Holz content --&gt;<br /> &lt;div id=&quot;holz-content&quot; class=&quot;content-section&quot; style=&quot;display: none; width: 100%;&quot;&gt;<br /> &lt;div style=&quot;display: flex; flex-wrap: wrap; gap: 0.4em; align-items: flex-start;&quot;&gt;<br /> &lt;div style=&quot;width: calc(20% - 0.2em); box-sizing: border-box; margin-top: 0em;&quot;&gt;<br /> &lt;h4&gt;[[Smoky Quartz]]&lt;/h4&gt; <br /> [[File:Test image1.jpg|300px|left|link=Smoky Quartz|style=max-width:100%;]]<br /> &lt;/div&gt;<br /> &lt;div style=&quot;width: calc(20% - 0.2em); box-sizing: border-box; margin-top: 0em;&quot;&gt;<br /> &lt;h4&gt;[[Smoky Quartz]]&lt;/h4&gt; <br /> [[File:Test image1.jpg|300px|left|link=Smoky Quartz|style=max-width:100%;]]<br /> &lt;/div&gt;<br /> &lt;div style=&quot;width: calc(20% - 0.2em); box-sizing: border-box; margin-top: 0em;&quot;&gt;<br /> &lt;h4&gt;[[Smoky Quartz]]&lt;/h4&gt; <br /> [[File:Test image1.jpg|300px|left|link=Smoky Quartz|style=max-width:100%;]]<br /> &lt;/div&gt;<br /> &lt;div style=&quot;width: calc(20% - 0.2em); box-sizing: border-box; margin-top: 0em;&quot;&gt;<br /> &lt;h4&gt;[[Smoky Quartz]]&lt;/h4&gt; <br /> [[File:Test image1.jpg|300px|left|link=Smoky Quartz|style=max-width:100%;]]<br /> &lt;/div&gt;<br /> &lt;div style=&quot;width: calc(20% - 0.2em); box-sizing: border-box; margin-top: 0em;&quot;&gt;<br /> &lt;h4&gt;[[Smoky Quartz]]&lt;/h4&gt; <br /> [[File:Test image1.jpg|300px|left|link=Smoky Quartz|style=max-width:100%;]]<br /> &lt;/div&gt;<br /> &lt;/div&gt;<br /> &lt;/div&gt;<br /> <br /> &lt;!-- Metalle content --&gt;<br /> &lt;div id=&quot;metalle-content&quot; class=&quot;content-section&quot; style=&quot;display: none; width: 100%;&quot;&gt;<br /> &lt;div style=&quot;display: flex; flex-wrap: wrap; gap: 0.4em; align-items: flex-start;&quot;&gt;<br /> &lt;div style=&quot;width: calc(20% - 0.2em); box-sizing: border-box; margin-top: 0em;&quot;&gt;<br /> &lt;h4&gt;[[Smoky Quartz]]&lt;/h4&gt; <br /> [[File:Test image1.jpg|300px|left|link=Smoky Quartz|style=max-width:100%;]]<br /> &lt;/div&gt;<br /> &lt;div style=&quot;width: calc(20% - 0.2em); box-sizing: border-box; margin-top: 0em;&quot;&gt;<br /> &lt;h4&gt;[[Smoky Quartz]]&lt;/h4&gt; <br /> [[File:Test image1.jpg|300px|left|link=Smoky Quartz|style=max-width:100%;]]<br /> &lt;/div&gt;<br /> &lt;div style=&quot;width: calc(20% - 0.2em); box-sizing: border-box; margin-top: 0em;&quot;&gt;<br /> &lt;h4&gt;[[Smoky Quartz]]&lt;/h4&gt; <br /> [[File:Test image1.jpg|300px|left|link=Smoky Quartz|style=max-width:100%;]]<br /> &lt;/div&gt;<br /> &lt;div style=&quot;width: calc(20% - 0.2em); box-sizing: border-box; margin-top: 0em;&quot;&gt;<br /> &lt;h4&gt;[[Smoky Quartz]]&lt;/h4&gt; <br /> [[File:Test image1.jpg|300px|left|link=Smoky Quartz|style=max-width:100%;]]<br /> &lt;/div&gt;<br /> &lt;div style=&quot;width: calc(20% - 0.2em); box-sizing: border-box; margin-top: 0em;&quot;&gt;<br /> &lt;h4&gt;[[Smoky Quartz]]&lt;/h4&gt; <br /> [[File:Test image1.jpg|300px|left|link=Smoky Quartz|style=max-width:100%;]]<br /> &lt;/div&gt;<br /> &lt;/div&gt;<br /> &lt;/div&gt;<br /> <br /> &lt;!-- Kunststoffe content --&gt;<br /> &lt;div id=&quot;kunststoffe-content&quot; class=&quot;content-section&quot; style=&quot;display: none; width: 100%;&quot;&gt;<br /> &lt;div style=&quot;display: flex; flex-wrap: wrap; gap: 0.4em; align-items: flex-start;&quot;&gt;<br /> &lt;div style=&quot;width: calc(20% - 0.2em); box-sizing: border-box; margin-top: 0em;&quot;&gt;<br /> &lt;h4&gt;[[Smoky Quartz]]&lt;/h4&gt; <br /> [[File:Test image1.jpg|300px|left|link=Smoky Quartz|style=max-width:100%;]]<br /> &lt;/div&gt;<br /> &lt;div style=&quot;width: calc(20% - 0.2em); box-sizing: border-box; margin-top: 0em;&quot;&gt;<br /> &lt;h4&gt;[[Smoky Quartz]]&lt;/h4&gt; <br /> [[File:Test image1.jpg|300px|left|link=Smoky Quartz|style=max-width:100%;]]<br /> &lt;/div&gt;<br /> &lt;div style=&quot;width: calc(20% - 0.2em); box-sizing: border-box; margin-top: 0em;&quot;&gt;<br /> &lt;h4&gt;[[Smoky Quartz]]&lt;/h4&gt; <br /> [[File:Test image1.jpg|300px|left|link=Smoky Quartz|style=max-width:100%;]]<br /> &lt;/div&gt;<br /> &lt;div style=&quot;width: calc(20% - 0.2em); box-sizing: border-box; margin-top: 0em;&quot;&gt;<br /> &lt;h4&gt;[[Smoky Quartz]]&lt;/h4&gt; <br /> [[File:Test image1.jpg|300px|left|link=Smoky Quartz|style=max-width:100%;]]<br /> &lt;/div&gt;<br /> &lt;div style=&quot;width: calc(20% - 0.2em); box-sizing: border-box; margin-top: 0em;&quot;&gt;<br /> &lt;h4&gt;[[Smoky Quartz]]&lt;/h4&gt; <br /> [[File:Test image1.jpg|300px|left|link=Smoky Quartz|style=max-width:100%;]]<br /> &lt;/div&gt;<br /> &lt;/div&gt;<br /> &lt;/div&gt;<br /> <br /> &lt;/div&gt;<br /> <br /> &lt;/div&gt;<br /> <br /> &lt;script&gt;<br /> document.addEventListener(&#039;DOMContentLoaded&#039;, function() {<br /> // Get all toggle buttons<br /> const toggleButtons = document.querySelectorAll(&#039;.toggle-button&#039;);<br /> const contentSections = document.querySelectorAll(&#039;.content-section&#039;);<br /> let currentlyOpen = null;<br /> <br /> toggleButtons.forEach(function(button) {<br /> button.addEventListener(&#039;click&#039;, function() {<br /> const targetId = this.getAttribute(&#039;data-target&#039;);<br /> const targetContent = document.getElementById(targetId);<br /> <br /> // If clicking the same button that&#039;s already open, close it<br /> if (currentlyOpen === targetId) {<br /> targetContent.style.display = &#039;none&#039;;<br /> currentlyOpen = null;<br /> return;<br /> }<br /> <br /> // Hide all content sections<br /> contentSections.forEach(function(section) {<br /> section.style.display = &#039;none&#039;;<br /> });<br /> <br /> // Show the target content<br /> targetContent.style.display = &#039;block&#039;;<br /> currentlyOpen = targetId;<br /> });<br /> });<br /> });<br /> &lt;/script&gt;</div>

Theo