Aktionen

Materialarchiv: Unterschied zwischen den Versionen

Aus exmediawiki

← Zum vorherigen VersionsunterschiedZum nächsten Versionsunterschied →
Theo (Diskussion | Beiträge)
515 Bearbeitungen
Theo (Diskussion | Beiträge)
515 Bearbeitungen
Zeile 5: Zeile 5:
</h2>
</h2>
<br>
<br>
=== Natural materials ===
<div style="display: flex; flex-wrap: wrap; gap: 1em; justify-content: flex-start;">
<div style="display: flex; flex-wrap: wrap; gap: 1em; justify-content: flex-start;">


<!-- Image Block 1 -->
<!-- Collapsible Block 1 -->
<div style="flex: 0 0 calc(20% - 1em);">
<div style="flex: 0 0 calc(20% - 1em);">
   <div class="collapsible">
   <div class="collapsible-box">
     <input type="checkbox" id="toggleGestein">
     <input type="checkbox" id="toggle1" style="display: none;">
     <label for="toggleGestein" style="cursor: pointer; border: 1px solid #ccc; padding: 0.5em; border-radius: 8px; font-weight: bold; text-align: center;">Gestein</label>
     <label for="toggle1" class="collapsible-label">Gestein</label>
     <div class="collapsible-content" style="display: none; text-align: center;">
     <div class="collapsible-content">
       <img src="https://upload.wikimedia.org/wikipedia/commons/6/6e/Test_image1.jpg" alt="Gestein" style="max-width: 100%; height: auto;">
       This is content for Gestein.
     </div>
     </div>
   </div>
   </div>
</div>
</div>


<!-- Image Block 2 -->
<!-- Collapsible Block 2 -->
<div style="flex: 0 0 calc(20% - 1em);">
<div style="flex: 0 0 calc(20% - 1em);">
   <div class="collapsible">
   <div class="collapsible-box">
     <input type="checkbox" id="toggleHolz">
     <input type="checkbox" id="toggle2" style="display: none;">
     <label for="toggleHolz" style="cursor: pointer; border: 1px solid #ccc; padding: 0.5em; border-radius: 8px; font-weight: bold; text-align: center;">Holz</label>
     <label for="toggle2" class="collapsible-label">Holz</label>
     <div class="collapsible-content" style="display: none; text-align: center;">
     <div class="collapsible-content">
       <img src="https://upload.wikimedia.org/wikipedia/commons/6/6e/Test_image1.jpg" alt="Holz" style="max-width: 100%; height: auto;">
       This is content for Holz.
     </div>
     </div>
   </div>
   </div>
</div>
</div>


<!-- Image Block 3 -->
<!-- Collapsible Block 3 -->
<div style="flex: 0 0 calc(20% - 1em);">
<div style="flex: 0 0 calc(20% - 1em);">
   <div class="collapsible">
   <div class="collapsible-box">
     <input type="checkbox" id="toggleTierischeWerkstoffe">
     <input type="checkbox" id="toggle3" style="display: none;">
     <label for="toggleTierischeWerkstoffe" style="cursor: pointer; border: 1px solid #ccc; padding: 0.5em; border-radius: 8px; font-weight: bold; text-align: center;">Tierische Werkstoffe</label>
     <label for="toggle3" class="collapsible-label">Tierische Werkstoffe</label>
     <div class="collapsible-content" style="display: none; text-align: center;">
     <div class="collapsible-content">
       <img src="https://upload.wikimedia.org/wikipedia/commons/6/6e/Test_image1.jpg" alt="Tierische Werkstoffe" style="max-width: 100%; height: auto;">
       This is content for Tierische Werkstoffe.
     </div>
     </div>
   </div>
   </div>
Zeile 43: Zeile 42:
</div>
</div>


<!-- STYLES -->
<style>
<style>
   .collapsible input[type="checkbox"] {
   .collapsible-box {
     display: none; /* Hide the checkbox */
     border: 2px solid #000;
    border-radius: 12px;
    padding: 0;
    background-color: #111;
    color: white;
    font-family: sans-serif;
    overflow: hidden;
   }
   }


   .collapsible input[type="checkbox"]:checked + label + .collapsible-content {
   .collapsible-label {
     display: block; /* Show the content when the checkbox is checked */
     display: block;
    padding: 0.75em 1em;
    background-color: #222;
    cursor: pointer;
    font-weight: bold;
    border-radius: 12px 12px 0 0;
    transition: background-color 0.3s;
   }
   }


   .collapsible .collapsible-content {
   .collapsible-label:hover {
     display: none; /* Hide the content by default */
    background-color: #333;
  }
 
  .collapsible-content {
     display: none;
    padding: 1em;
    background-color: #1a1a1a;
    border-top: 1px solid #333;
    border-radius: 0 0 12px 12px;
  }
 
  input[type="checkbox"]:checked + .collapsible-label + .collapsible-content {
    display: block;
   }
   }
</style>
</style>

Version vom 14. Mai 2025, 14:48 Uhr


Materials 


   <input type="checkbox" id="toggle1" style="display: none;">
   

     This is content for Gestein.

   <input type="checkbox" id="toggle2" style="display: none;">
   

     This is content for Holz.

   <input type="checkbox" id="toggle3" style="display: none;">
   

     This is content for Tierische Werkstoffe.

<style> 

 .collapsible-box {
   border: 2px solid #000;
   border-radius: 12px;
   padding: 0;
   background-color: #111;
   color: white;
   font-family: sans-serif;
   overflow: hidden;
 }

 .collapsible-label {
   display: block;
   padding: 0.75em 1em;
   background-color: #222;
   cursor: pointer;
   font-weight: bold;
   border-radius: 12px 12px 0 0;
   transition: background-color 0.3s;
 }

 .collapsible-label:hover {
   background-color: #333;
 }

 .collapsible-content {
   display: none;
   padding: 1em;
   background-color: #1a1a1a;
   border-top: 1px solid #333;
   border-radius: 0 0 12px 12px;
 }

 input[type="checkbox"]:checked + .collapsible-label + .collapsible-content {
   display: block;
 }

</style>

Synthetic materials

Abgerufen von „https://exmediawiki.khm.de/index.php?title=Materialarchiv&oldid=10029“