Quelltext der Seite Javascripttest

__NOTOC__

<h2>Materials</h2>
<br>
<h4>Natural materials</h4>

<!-- Main container -->
<div style="display: flex; flex-wrap: wrap; gap: 0.5em; align-items: flex-start; width: 100%; max-width: 100%; box-sizing: border-box; overflow: hidden;">

  <!-- Toggle buttons container -->
  <div id="toggle-buttons" style="display: flex; flex-wrap: wrap; gap: 0.5em; width: 100%;">
    
    <!-- Holz toggle button -->
    <div class="toggle-button" data-target="holz-content" style="cursor: pointer;">
      <div style="background-color: black; border-radius: 9999px; padding: 0.5em 2em; text-align: center; display: inline-block; margin-top: 0.5em;">
        <h3 style="color: white; margin: 0;">Holz</h3>
      </div>
    </div>

    <!-- Metalle toggle button -->
    <div class="toggle-button" data-target="metalle-content" style="cursor: pointer;">
      <div style="background-color: black; border-radius: 9999px; padding: 0.5em 2em; text-align: center; display: inline-block; margin-top: 0.5em;">
        <h3 style="color: white; margin: 0;">Metalle</h3>
      </div>
    </div>

    <!-- Kunststoffe toggle button -->
    <div class="toggle-button" data-target="kunststoffe-content" style="cursor: pointer;">
      <div style="background-color: black; border-radius: 9999px; padding: 0.5em 2em; text-align: center; display: inline-block; margin-top: 0.5em;">
        <h3 style="color: white; margin: 0;">Kunststoffe</h3>
      </div>
    </div>
    
  </div>

  <!-- Content sections container -->
  <div id="content-sections" style="width: 100%; margin-top: 1em;">
    
    <!-- Holz content -->
    <div id="holz-content" class="content-section" style="display: none; width: 100%;">
      <div style="display: flex; flex-wrap: wrap; gap: 0.4em; align-items: flex-start;">
        <div style="width: calc(20% - 0.2em); box-sizing: border-box; margin-top: 0em;">
          <h4>[[Smoky Quartz]]</h4>  
          [[File:Test image1.jpg|300px|left|link=Smoky Quartz|style=max-width:100%;]]
        </div>
        <div style="width: calc(20% - 0.2em); box-sizing: border-box; margin-top: 0em;">
          <h4>[[Smoky Quartz]]</h4>  
          [[File:Test image1.jpg|300px|left|link=Smoky Quartz|style=max-width:100%;]]
        </div>
        <div style="width: calc(20% - 0.2em); box-sizing: border-box; margin-top: 0em;">
          <h4>[[Smoky Quartz]]</h4>  
          [[File:Test image1.jpg|300px|left|link=Smoky Quartz|style=max-width:100%;]]
        </div>
        <div style="width: calc(20% - 0.2em); box-sizing: border-box; margin-top: 0em;">
          <h4>[[Smoky Quartz]]</h4>  
          [[File:Test image1.jpg|300px|left|link=Smoky Quartz|style=max-width:100%;]]
        </div>
        <div style="width: calc(20% - 0.2em); box-sizing: border-box; margin-top: 0em;">
          <h4>[[Smoky Quartz]]</h4>  
          [[File:Test image1.jpg|300px|left|link=Smoky Quartz|style=max-width:100%;]]
        </div>
      </div>
    </div>

    <!-- Metalle content -->
    <div id="metalle-content" class="content-section" style="display: none; width: 100%;">
      <div style="display: flex; flex-wrap: wrap; gap: 0.4em; align-items: flex-start;">
        <div style="width: calc(20% - 0.2em); box-sizing: border-box; margin-top: 0em;">
          <h4>[[Smoky Quartz]]</h4>  
          [[File:Test image1.jpg|300px|left|link=Smoky Quartz|style=max-width:100%;]]
        </div>
        <div style="width: calc(20% - 0.2em); box-sizing: border-box; margin-top: 0em;">
          <h4>[[Smoky Quartz]]</h4>  
          [[File:Test image1.jpg|300px|left|link=Smoky Quartz|style=max-width:100%;]]
        </div>
        <div style="width: calc(20% - 0.2em); box-sizing: border-box; margin-top: 0em;">
          <h4>[[Smoky Quartz]]</h4>  
          [[File:Test image1.jpg|300px|left|link=Smoky Quartz|style=max-width:100%;]]
        </div>
        <div style="width: calc(20% - 0.2em); box-sizing: border-box; margin-top: 0em;">
          <h4>[[Smoky Quartz]]</h4>  
          [[File:Test image1.jpg|300px|left|link=Smoky Quartz|style=max-width:100%;]]
        </div>
        <div style="width: calc(20% - 0.2em); box-sizing: border-box; margin-top: 0em;">
          <h4>[[Smoky Quartz]]</h4>  
          [[File:Test image1.jpg|300px|left|link=Smoky Quartz|style=max-width:100%;]]
        </div>
      </div>
    </div>

    <!-- Kunststoffe content -->
    <div id="kunststoffe-content" class="content-section" style="display: none; width: 100%;">
      <div style="display: flex; flex-wrap: wrap; gap: 0.4em; align-items: flex-start;">
        <div style="width: calc(20% - 0.2em); box-sizing: border-box; margin-top: 0em;">
          <h4>[[Smoky Quartz]]</h4>  
          [[File:Test image1.jpg|300px|left|link=Smoky Quartz|style=max-width:100%;]]
        </div>
        <div style="width: calc(20% - 0.2em); box-sizing: border-box; margin-top: 0em;">
          <h4>[[Smoky Quartz]]</h4>  
          [[File:Test image1.jpg|300px|left|link=Smoky Quartz|style=max-width:100%;]]
        </div>
        <div style="width: calc(20% - 0.2em); box-sizing: border-box; margin-top: 0em;">
          <h4>[[Smoky Quartz]]</h4>  
          [[File:Test image1.jpg|300px|left|link=Smoky Quartz|style=max-width:100%;]]
        </div>
        <div style="width: calc(20% - 0.2em); box-sizing: border-box; margin-top: 0em;">
          <h4>[[Smoky Quartz]]</h4>  
          [[File:Test image1.jpg|300px|left|link=Smoky Quartz|style=max-width:100%;]]
        </div>
        <div style="width: calc(20% - 0.2em); box-sizing: border-box; margin-top: 0em;">
          <h4>[[Smoky Quartz]]</h4>  
          [[File:Test image1.jpg|300px|left|link=Smoky Quartz|style=max-width:100%;]]
        </div>
      </div>
    </div>

  </div>

</div>