Materialarchiv: Unterschied zwischen den Versionen
Aus exmediawiki
Theo (Diskussion | Beiträge) Keine Bearbeitungszusammenfassung |
Theo (Diskussion | Beiträge) |
||
| Zeile 8: | Zeile 8: | ||
<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 | <!-- 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-title" style="font-weight: bold; text-align: center;">Gestein</div> | |||
<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;"> | |||
</div> | |||
</div> | |||
</div> | </div> | ||
<!-- 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-title" style="font-weight: bold; text-align: center;">Holz</div> | |||
<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;"> | |||
</div> | |||
</div> | |||
</div> | </div> | ||
<!-- 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-title" style="font-weight: bold; text-align: center;">Tierische Werkstoffe</div> | |||
<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;"> | |||
</div> | |||
</div> | |||
</div> | </div> | ||
</div> | </div> | ||
</ | |||
<script> | |||
< | // JavaScript to handle collapsible behavior | ||
document.querySelectorAll('.collapsible').forEach(function(collapsible) { | |||
collapsible.addEventListener('click', function() { | |||
var content = collapsible.querySelector('.collapsible-content'); | |||
var title = collapsible.querySelector('.collapsible-title'); | |||
// Toggle display of the content | |||
if (content.style.display === 'none' || content.style.display === '') { | |||
content.style.display = 'block'; | |||
title.style.borderBottom = '2px solid #000'; // Optional border on open | |||
} else { | |||
content.style.display = 'none'; | |||
title.style.borderBottom = ''; // Remove border when closed | |||
} | |||
}); | |||
}); | |||
</script> | |||
=== Synthetic materials === | === Synthetic materials === | ||
Version vom 14. Mai 2025, 14:44 Uhr
Materials
Natural materials
Gestein
Holz
Tierische Werkstoffe
<script>
// JavaScript to handle collapsible behavior
document.querySelectorAll('.collapsible').forEach(function(collapsible) {
collapsible.addEventListener('click', function() {
var content = collapsible.querySelector('.collapsible-content');
var title = collapsible.querySelector('.collapsible-title');
// Toggle display of the content
if (content.style.display === 'none' || content.style.display === ) {
content.style.display = 'block';
title.style.borderBottom = '2px solid #000'; // Optional border on open
} else {
content.style.display = 'none';
title.style.borderBottom = ; // Remove border when closed
}
});
});
</script>
