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 10: Zeile 10:
<!-- Image Block 1 -->
<!-- Image Block 1 -->
<div style="flex: 0 0 calc(20% - 1em);">
<div style="flex: 0 0 calc(20% - 1em);">
   <div class="collapsible" style="cursor: pointer; border: 1px solid #ccc; padding: 0.5em; border-radius: 8px;">
   <div class="collapsible">
    <div class="collapsible-title" style="font-weight: bold; text-align: center;">Gestein</div>
    <input type="checkbox" id="toggleGestein">
    <label for="toggleGestein" style="cursor: pointer; border: 1px solid #ccc; padding: 0.5em; border-radius: 8px; font-weight: bold; text-align: center;">Gestein</label>
     <div class="collapsible-content" style="display: none; text-align: center;">
     <div class="collapsible-content" style="display: none; text-align: center;">
       <img src="https://upload.wikimedia.org/wikipedia/commons/6/6e/Test_image1.jpg" alt="Gestein" style="max-width: 100%; height: auto;">
       <img src="https://upload.wikimedia.org/wikipedia/commons/6/6e/Test_image1.jpg" alt="Gestein" style="max-width: 100%; height: auto;">
Zeile 20: Zeile 21:
<!-- Image Block 2 -->
<!-- Image Block 2 -->
<div style="flex: 0 0 calc(20% - 1em);">
<div style="flex: 0 0 calc(20% - 1em);">
   <div class="collapsible" style="cursor: pointer; border: 1px solid #ccc; padding: 0.5em; border-radius: 8px;">
   <div class="collapsible">
    <div class="collapsible-title" style="font-weight: bold; text-align: center;">Holz</div>
    <input type="checkbox" id="toggleHolz">
    <label for="toggleHolz" style="cursor: pointer; border: 1px solid #ccc; padding: 0.5em; border-radius: 8px; font-weight: bold; text-align: center;">Holz</label>
     <div class="collapsible-content" style="display: none; text-align: center;">
     <div class="collapsible-content" style="display: none; text-align: center;">
       <img src="https://upload.wikimedia.org/wikipedia/commons/6/6e/Test_image1.jpg" alt="Holz" style="max-width: 100%; height: auto;">
       <img src="https://upload.wikimedia.org/wikipedia/commons/6/6e/Test_image1.jpg" alt="Holz" style="max-width: 100%; height: auto;">
Zeile 30: Zeile 32:
<!-- Image Block 3 -->
<!-- Image Block 3 -->
<div style="flex: 0 0 calc(20% - 1em);">
<div style="flex: 0 0 calc(20% - 1em);">
   <div class="collapsible" style="cursor: pointer; border: 1px solid #ccc; padding: 0.5em; border-radius: 8px;">
   <div class="collapsible">
    <div class="collapsible-title" style="font-weight: bold; text-align: center;">Tierische Werkstoffe</div>
    <input type="checkbox" id="toggleTierischeWerkstoffe">
    <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>
     <div class="collapsible-content" style="display: none; text-align: center;">
     <div class="collapsible-content" style="display: none; text-align: center;">
       <img src="https://upload.wikimedia.org/wikipedia/commons/6/6e/Test_image1.jpg" alt="Tierische Werkstoffe" style="max-width: 100%; height: auto;">
       <img src="https://upload.wikimedia.org/wikipedia/commons/6/6e/Test_image1.jpg" alt="Tierische Werkstoffe" style="max-width: 100%; height: auto;">
Zeile 40: Zeile 43:
</div>
</div>


<script>
<style>
   // JavaScript to handle collapsible behavior
   .collapsible input[type="checkbox"] {
  document.querySelectorAll('.collapsible').forEach(function(collapsible) {
     display: none; /* Hide the checkbox */
     collapsible.addEventListener('click', function() {
  }
      var content = collapsible.querySelector('.collapsible-content');
      var title = collapsible.querySelector('.collapsible-title');


      // Toggle display of the content
  .collapsible input[type="checkbox"]:checked + label + .collapsible-content {
      if (content.style.display === 'none' || content.style.display === '') {
    display: block; /* Show the content when the checkbox is checked */
        content.style.display = 'block';
  }
        title.style.borderBottom = '2px solid #000'; // Optional border on open
 
      } else {
  .collapsible .collapsible-content {
        content.style.display = 'none';
    display: none; /* Hide the content by default */
        title.style.borderBottom = ''; // Remove border when closed
   }
      }
</style>
    });
   });
</script>


=== Synthetic materials ===
=== Synthetic materials ===

Version vom 14. Mai 2025, 14:46 Uhr


Materials


Natural materials

   <input type="checkbox" id="toggleGestein">
   

   <input type="checkbox" id="toggleHolz">
   

   <input type="checkbox" id="toggleTierischeWerkstoffe">

<style> 

 .collapsible input[type="checkbox"] {
   display: none; /* Hide the checkbox */
 }

 .collapsible input[type="checkbox"]:checked + label + .collapsible-content {
   display: block; /* Show the content when the checkbox is checked */
 }

 .collapsible .collapsible-content {
   display: none; /* Hide the content by default */
 }

</style>

Synthetic materials

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