Aktionen

Materialseite: Unterschied zwischen den Versionen

Aus exmediawiki

Theo (Diskussion | Beiträge)
515 Bearbeitungen
Die Seite wurde neu angelegt: „__NOTOC__ <h2>Materials</h2> <br> <h4>Natural materials</h4> <!-- Main container --> <div style="display: flex; flex-wrap: wrap; gap: 0.5em; align-items: fle…“
 
Theo (Diskussion | Beiträge)
515 Bearbeitungen
Keine Bearbeitungszusammenfassung
 
(Eine dazwischenliegende Version desselben Benutzers wird nicht angezeigt)
Zeile 9: Zeile 9:


   <!-- Toggle buttons container -->
   <!-- Toggle buttons container -->
   <div id="toggle-buttons" style="display: flex; flex-wrap: wrap; gap: 0.5em; width: 100%;">
   <div style="display: flex; flex-wrap: wrap; gap: 0.5em; width: 100%;">
      
      
     <!-- Holz toggle button -->
     <!-- Holz collapsible -->
     <div class="toggle-button" data-target="holz-content" style="cursor: pointer;">
     <div class="mw-collapsible mw-collapsed" style="width: 100%;">
      <div style="background-color: black; border-radius: 9999px; padding: 0.5em 2em; text-align: center; display: inline-block; margin-top: 0.5em;">
      <div class="mw-collapsible-toggle" style="cursor: pointer; width: auto; display: inline-block;">
        <h3 style="color: white; margin: 0;">Holz</h3>
        <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>
       </div>
    </div>
      <div class="mw-collapsible-content" style="width: 100%; margin-top: 1em; clear: both;">
 
        <div style="display: flex; flex-wrap: wrap; gap: 0.4em; align-items: flex-start;">
    <!-- Metalle toggle button -->
          <div style="width: calc(20% - 0.2em); box-sizing: border-box; margin-top: 0em;">
    <div class="toggle-button" data-target="metalle-content" style="cursor: pointer;">
            <h4>[[Smoky Quartz]]</h4> 
      <div style="background-color: black; border-radius: 9999px; padding: 0.5em 2em; text-align: center; display: inline-block; margin-top: 0.5em;">
            [[File:Test image1.jpg|300px|left|link=Smoky Quartz|style=max-width:100%;]]
        <h3 style="color: white; margin: 0;">Metalle</h3>
          </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>
     </div>


     <!-- Kunststoffe toggle button -->
     <!-- Metalle collapsible -->
     <div class="toggle-button" data-target="kunststoffe-content" style="cursor: pointer;">
     <div class="mw-collapsible mw-collapsed" style="width: 100%;">
      <div style="background-color: black; border-radius: 9999px; padding: 0.5em 2em; text-align: center; display: inline-block; margin-top: 0.5em;">
      <div class="mw-collapsible-toggle" style="cursor: pointer; width: auto; display: inline-block;">
        <h3 style="color: white; margin: 0;">Kunststoffe</h3>
        <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>
       </div>
    </div>
      <div class="mw-collapsible-content" style="width: 100%; margin-top: 1em; clear: both;">
   
        <div style="display: flex; flex-wrap: wrap; gap: 0.4em; align-items: flex-start;">
  </div>
          <div style="width: calc(20% - 0.2em); box-sizing: border-box; margin-top: 0em;">
 
            <h4>[[Smoky Quartz]]</h4>   
  <!-- Content sections container -->
            [[File:Test image1.jpg|300px|left|link=Smoky Quartz|style=max-width:100%;]]
  <div id="content-sections" style="width: 100%; margin-top: 1em;">
          </div>
   
          <div style="width: calc(20% - 0.2em); box-sizing: border-box; margin-top: 0em;">
    <!-- Holz content -->
            <h4>[[Smoky Quartz]]</h4>   
    <div id="holz-content" class="content-section" style="display: none; width: 100%;">
            [[File:Test image1.jpg|300px|left|link=Smoky Quartz|style=max-width:100%;]]
      <div style="display: flex; flex-wrap: wrap; gap: 0.4em; align-items: flex-start;">
          </div>
        <div style="width: calc(20% - 0.2em); box-sizing: border-box; margin-top: 0em;">
          <div style="width: calc(20% - 0.2em); box-sizing: border-box; margin-top: 0em;">
          <h4>[[Smoky Quartz]]</h4>   
            <h4>[[Smoky Quartz]]</h4>   
          [[File:Test image1.jpg|300px|left|link=Smoky Quartz|style=max-width:100%;]]
            [[File:Test image1.jpg|300px|left|link=Smoky Quartz|style=max-width:100%;]]
        </div>
          </div>
        <div style="width: calc(20% - 0.2em); box-sizing: border-box; margin-top: 0em;">
          <div style="width: calc(20% - 0.2em); box-sizing: border-box; margin-top: 0em;">
          <h4>[[Smoky Quartz]]</h4>   
            <h4>[[Smoky Quartz]]</h4>   
          [[File:Test image1.jpg|300px|left|link=Smoky Quartz|style=max-width:100%;]]
            [[File:Test image1.jpg|300px|left|link=Smoky Quartz|style=max-width:100%;]]
        </div>
          </div>
        <div style="width: calc(20% - 0.2em); box-sizing: border-box; margin-top: 0em;">
          <div style="width: calc(20% - 0.2em); box-sizing: border-box; margin-top: 0em;">
          <h4>[[Smoky Quartz]]</h4>   
            <h4>[[Smoky Quartz]]</h4>   
          [[File:Test image1.jpg|300px|left|link=Smoky Quartz|style=max-width:100%;]]
            [[File:Test image1.jpg|300px|left|link=Smoky Quartz|style=max-width:100%;]]
        </div>
          </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>
     </div>


     <!-- Metalle content -->
     <!-- Kunststoffe collapsible -->
     <div id="metalle-content" class="content-section" style="display: none; width: 100%;">
     <div class="mw-collapsible mw-collapsed" style="width: 100%;">
       <div style="display: flex; flex-wrap: wrap; gap: 0.4em; align-items: flex-start;">
       <div class="mw-collapsible-toggle" style="cursor: pointer; width: auto; display: inline-block;">
        <div style="width: calc(20% - 0.2em); box-sizing: border-box; margin-top: 0em;">
         <div style="background-color: black; border-radius: 9999px; padding: 0.5em 2em; text-align: center; display: inline-block; margin-top: 0.5em;">
          <h4>[[Smoky Quartz]]</h4> 
           <h3 style="color: white; margin: 0;">Kunststoffe</h3>
          [[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>
      <div class="mw-collapsible-content" style="width: 100%; margin-top: 1em; clear: both;">
 
        <div style="display: flex; flex-wrap: wrap; gap: 0.4em; align-items: flex-start;">
    <!-- Kunststoffe content -->
          <div style="width: calc(20% - 0.2em); box-sizing: border-box; margin-top: 0em;">
    <div id="kunststoffe-content" class="content-section" style="display: none; width: 100%;">
            <h4>[[Smoky Quartz]]</h4>   
      <div style="display: flex; flex-wrap: wrap; gap: 0.4em; align-items: flex-start;">
            [[File:Test image1.jpg|300px|left|link=Smoky Quartz|style=max-width:100%;]]
        <div style="width: calc(20% - 0.2em); box-sizing: border-box; margin-top: 0em;">
          </div>
          <h4>[[Smoky Quartz]]</h4>   
          <div style="width: calc(20% - 0.2em); box-sizing: border-box; margin-top: 0em;">
          [[File:Test image1.jpg|300px|left|link=Smoky Quartz|style=max-width:100%;]]
            <h4>[[Smoky Quartz]]</h4>   
        </div>
            [[File:Test image1.jpg|300px|left|link=Smoky Quartz|style=max-width:100%;]]
        <div style="width: calc(20% - 0.2em); box-sizing: border-box; margin-top: 0em;">
          </div>
          <h4>[[Smoky Quartz]]</h4>   
          <div style="width: calc(20% - 0.2em); box-sizing: border-box; margin-top: 0em;">
          [[File:Test image1.jpg|300px|left|link=Smoky Quartz|style=max-width:100%;]]
            <h4>[[Smoky Quartz]]</h4>   
        </div>
            [[File:Test image1.jpg|300px|left|link=Smoky Quartz|style=max-width:100%;]]
        <div style="width: calc(20% - 0.2em); box-sizing: border-box; margin-top: 0em;">
          </div>
          <h4>[[Smoky Quartz]]</h4>   
          <div style="width: calc(20% - 0.2em); box-sizing: border-box; margin-top: 0em;">
          [[File:Test image1.jpg|300px|left|link=Smoky Quartz|style=max-width:100%;]]
            <h4>[[Smoky Quartz]]</h4>   
        </div>
            [[File:Test image1.jpg|300px|left|link=Smoky Quartz|style=max-width:100%;]]
        <div style="width: calc(20% - 0.2em); box-sizing: border-box; margin-top: 0em;">
          </div>
          <h4>[[Smoky Quartz]]</h4>   
          <div style="width: calc(20% - 0.2em); box-sizing: border-box; margin-top: 0em;">
          [[File:Test image1.jpg|300px|left|link=Smoky Quartz|style=max-width:100%;]]
            <h4>[[Smoky Quartz]]</h4>   
        </div>
            [[File:Test image1.jpg|300px|left|link=Smoky Quartz|style=max-width:100%;]]
        <div style="width: calc(20% - 0.2em); box-sizing: border-box; margin-top: 0em;">
          </div>
          <h4>[[Smoky Quartz]]</h4>   
          [[File:Test image1.jpg|300px|left|link=Smoky Quartz|style=max-width:100%;]]
         </div>
         </div>
       </div>
       </div>
Zeile 118: Zeile 113:


</div>
</div>
<script>
document.addEventListener('DOMContentLoaded', function() {
  // Get all toggle buttons
  const toggleButtons = document.querySelectorAll('.toggle-button');
  const contentSections = document.querySelectorAll('.content-section');
  let currentlyOpen = null;
  toggleButtons.forEach(function(button) {
    button.addEventListener('click', function() {
      const targetId = this.getAttribute('data-target');
      const targetContent = document.getElementById(targetId);
     
      // If clicking the same button that's already open, close it
      if (currentlyOpen === targetId) {
        targetContent.style.display = 'none';
        currentlyOpen = null;
        return;
      }
     
      // Hide all content sections
      contentSections.forEach(function(section) {
        section.style.display = 'none';
      });
     
      // Show the target content
      targetContent.style.display = 'block';
      currentlyOpen = targetId;
    });
  });
});
</script>

Aktuelle Version vom 26. Mai 2025, 13:46 Uhr


Materials


Natural materials

Holz

Smoky Quartz

style=max-width:100%;
style=max-width:100%;

Smoky Quartz

style=max-width:100%;
style=max-width:100%;

Smoky Quartz

style=max-width:100%;
style=max-width:100%;

Smoky Quartz

style=max-width:100%;
style=max-width:100%;

Smoky Quartz

style=max-width:100%;
style=max-width:100%;

Metalle

Smoky Quartz

style=max-width:100%;
style=max-width:100%;

Smoky Quartz

style=max-width:100%;
style=max-width:100%;

Smoky Quartz

style=max-width:100%;
style=max-width:100%;

Smoky Quartz

style=max-width:100%;
style=max-width:100%;

Smoky Quartz

style=max-width:100%;
style=max-width:100%;

Kunststoffe

Smoky Quartz

style=max-width:100%;
style=max-width:100%;

Smoky Quartz

style=max-width:100%;
style=max-width:100%;

Smoky Quartz

style=max-width:100%;
style=max-width:100%;

Smoky Quartz

style=max-width:100%;
style=max-width:100%;

Smoky Quartz

style=max-width:100%;
style=max-width:100%;
Abgerufen von „https://exmediawiki.khm.de/index.php?title=Materialseite&oldid=10355“