Aktionen

Test3: Unterschied zwischen den Versionen

Aus exmediawiki

← Zum vorherigen Versionsunterschied
Theo (Diskussion | Beiträge)
515 Bearbeitungen
Keine Bearbeitungszusammenfassung
Theo (Diskussion | Beiträge)
515 Bearbeitungen
Keine Bearbeitungszusammenfassung
 
(36 dazwischenliegende Versionen desselben Benutzers werden nicht angezeigt)
Zeile 1: Zeile 1:
<div class="mw-collapsible-content-wrapper" id="collapsibleGroup">
__NOTOC__
<div style="display: flex; flex-wrap: wrap; gap: 1em; justify-content: space-between; width: 100%;">
 
 
<h2 style="border-bottom: 2px solid black; padding-bottom: 0em;">
  Materials
</h2>
<br>
<h3>Natural materials</h3>
 
<div style="display: flex; flex-wrap: wrap; justify-content: space-between; width: 100%; margin-bottom: 50px;">


<!-- First collapsible item -->
<!-- First collapsible item -->
<div class="mw-collapsible mw-collapsed" style="flex: 0 0 calc(25% - 1em); margin-bottom: 1em;" data-collapsegroup="mainGroup">
<div class="mw-collapsible mw-collapsed" style="flex: 0 0 calc(25% - 0.1em); position: relative;">
   <div class="mw-collapsible-toggle" style="float: none; text-align: center;">
   <div class="mw-collapsible-toggle">
       <span class="down">
       <span class="down">
        '''Gestein'''<br>
<h5 style="border-bottom: padding-bottom: 1em; font-size: 1.5em;">
        [[File:Test image1.jpg|150px|link=Smoky Quartz]]  
  Holz
</h5>
[[File:Test image1.jpg|300px|left|link=Smoky Quartz]]  
       </span>
       </span>
   </div>
   </div>
  <div class="mw-collapsible-content" style="width: 100%; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: flex-start;">
      <div style="width: 100%; height: 15px;">
</div>
     
<!-- Image Block Start -->
<div>
  [[File:Test image1.jpg|300px|left|link=Smoky Quartz|style=max-width:100%;]]
  <div style="margin-top: 0.5em;">[[Smoky Quartz]]</div>
</div>
<div>
  [[File:Test image1.jpg|300px|left|link=Smoky Quartz|style=max-width:100%;]]
  <div style="margin-top: 0.5em;">[[Smoky Quartz]]</div>
</div>
<div>
  [[File:Test image1.jpg|300px|left|link=Smoky Quartz|style=max-width:100%;]]
  <div style="margin-top: 0.5em;">[[Smoky Quartz]]</div>
</div>
<div>
  [[File:Test image1.jpg|300px|left|link=Smoky Quartz|style=max-width:100%;]]
  <div style="margin-top: 0.5em;">[[Smoky Quartz]]</div>
</div>
<div>
  [[File:Test image1.jpg|300px|left|link=Smoky Quartz|style=max-width:100%;]]
  <div style="margin-top: 0.5em;">[[Smoky Quartz]]</div>
</div>
</div>
</div>
</div>


<!-- Second collapsible item -->
<!-- First collapsible item -->
<div class="mw-collapsible mw-collapsed" style="flex: 0 0 calc(25% - 1em); margin-bottom: 1em;" data-collapsegroup="mainGroup">
<div class="mw-collapsible mw-collapsed" style="flex: 0 0 calc(25% - 0.1em); position: relative;">
   <div class="mw-collapsible-toggle" style="float: none; text-align: center;">
   <div class="mw-collapsible-toggle">
       <span class="down">
       <span class="down">
        '''Mineralien'''<br>
<h5 style="border-bottom: padding-bottom: 1em; font-size: 1.5em;">
        [[File:Test image2.jpg|150px|link=Amethyst]]  
  Holz
</h5>
[[File:Test image1.jpg|300px|left|link=Smoky Quartz]]  
       </span>
       </span>
   </div>
   </div>
  <div class="mw-collapsible-content" style="width: 100%; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: flex-start;">
      <div style="width: 100%; height: 15px;">
</div>
</div>
     
<!-- Image Block Start -->


<!-- Third collapsible item -->
<div>
<div class="mw-collapsible mw-collapsed" style="flex: 0 0 calc(25% - 1em); margin-bottom: 1em;" data-collapsegroup="mainGroup">
  [[File:Test image1.jpg|300px|left|link=Smoky Quartz|style=max-width:100%;]]
   <div class="mw-collapsible-toggle" style="float: none; text-align: center;">
  <div style="margin-top: 0.5em;">[[Smoky Quartz]]</div>
</div>
<div>
  [[File:Test image1.jpg|300px|left|link=Smoky Quartz|style=max-width:100%;]]
  <div style="margin-top: 0.5em;">[[Smoky Quartz]]</div>
</div>
<div>
  [[File:Test image1.jpg|300px|left|link=Smoky Quartz|style=max-width:100%;]]
  <div style="margin-top: 0.5em;">[[Smoky Quartz]]</div>
</div>
<div>
  [[File:Test image1.jpg|300px|left|link=Smoky Quartz|style=max-width:100%;]]
  <div style="margin-top: 0.5em;">[[Smoky Quartz]]</div>
</div>
<div>
  [[File:Test image1.jpg|300px|left|link=Smoky Quartz|style=max-width:100%;]]
  <div style="margin-top: 0.5em;">[[Smoky Quartz]]</div>
</div>
</div>
</div>
 
<!-- First collapsible item -->
<div class="mw-collapsible mw-collapsed" style="flex: 0 0 calc(25% - 0.1em); position: relative;">
   <div class="mw-collapsible-toggle">
       <span class="down">
       <span class="down">
        '''Fossilien'''<br>
<h5 style="border-bottom: padding-bottom: 1em; font-size: 1.5em;">
        [[File:Test image3.jpg|150px|link=Fossil]]  
  Holz
</h5>
[[File:Test image1.jpg|300px|left|link=Smoky Quartz]]  
       </span>
       </span>
   </div>
   </div>
  <div class="mw-collapsible-content" style="width: 100%; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: flex-start;">
      <div style="width: 100%; height: 15px;">
</div>
</div>
     
<!-- Image Block Start -->


<!-- Fourth collapsible item -->
<div>
<div class="mw-collapsible mw-collapsed" style="flex: 0 0 calc(25% - 1em); margin-bottom: 1em;" data-collapsegroup="mainGroup">
  [[File:Test image1.jpg|300px|left|link=Smoky Quartz|style=max-width:100%;]]
   <div class="mw-collapsible-toggle" style="float: none; text-align: center;">
  <div style="margin-top: 0.5em;">[[Smoky Quartz]]</div>
</div>
<div>
  [[File:Test image1.jpg|300px|left|link=Smoky Quartz|style=max-width:100%;]]
  <div style="margin-top: 0.5em;">[[Smoky Quartz]]</div>
</div>
<div>
  [[File:Test image1.jpg|300px|left|link=Smoky Quartz|style=max-width:100%;]]
  <div style="margin-top: 0.5em;">[[Smoky Quartz]]</div>
</div>
<div>
  [[File:Test image1.jpg|300px|left|link=Smoky Quartz|style=max-width:100%;]]
  <div style="margin-top: 0.5em;">[[Smoky Quartz]]</div>
</div>
<div>
  [[File:Test image1.jpg|300px|left|link=Smoky Quartz|style=max-width:100%;]]
  <div style="margin-top: 0.5em;">[[Smoky Quartz]]</div>
</div>
</div>
</div>
 
<!-- First collapsible item -->
<div class="mw-collapsible mw-collapsed" style="flex: 0 0 calc(25% - 0.1em); position: relative;">
   <div class="mw-collapsible-toggle">
       <span class="down">
       <span class="down">
        '''Edelsteine'''<br>
<h5 style="border-bottom: padding-bottom: 1em; font-size: 1.5em;">
        [[File:Test image4.jpg|150px|link=Diamond]]  
  Holz
</h5>
[[File:Test image1.jpg|300px|left|link=Smoky Quartz]]  
       </span>
       </span>
   </div>
   </div>
  <div class="mw-collapsible-content" style="width: 100%; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: flex-start;">
      <div style="width: 100%; height: 15px;">
</div>
</div>
     
<!-- Image Block Start -->


<div>
  [[File:Test image1.jpg|300px|left|link=Smoky Quartz|style=max-width:100%;]]
  <div style="margin-top: 0.5em;">[[Smoky Quartz]]</div>
</div>
<div>
  [[File:Test image1.jpg|300px|left|link=Smoky Quartz|style=max-width:100%;]]
  <div style="margin-top: 0.5em;">[[Smoky Quartz]]</div>
</div>
<div>
  [[File:Test image1.jpg|300px|left|link=Smoky Quartz|style=max-width:100%;]]
  <div style="margin-top: 0.5em;">[[Smoky Quartz]]</div>
</div>
<div>
  [[File:Test image1.jpg|300px|left|link=Smoky Quartz|style=max-width:100%;]]
  <div style="margin-top: 0.5em;">[[Smoky Quartz]]</div>
</div>
<div>
  [[File:Test image1.jpg|300px|left|link=Smoky Quartz|style=max-width:100%;]]
  <div style="margin-top: 0.5em;">[[Smoky Quartz]]</div>
</div>
</div>
</div>
<!-- Separate container for expanded content -->
<div id="gestein-content" class="mw-collapsible-content" style="display: none; width: 100%; clear: both; margin-bottom: 2em;">
  <div style="display: flex; flex-wrap: wrap; gap: 1em; justify-content: flex-start; padding: 1em; border: 1px solid #ddd; background-color: #f9f9f9;">
      <!-- Image Block Start -->
      <div style="flex: 0 0 calc(20% - 1em);">
        [[File:Test image1.jpg|150px|link=Smoky Quartz]]
        <div style="margin-top: 0.5em;">[[Smoky Quartz]]</div>
      </div>
      <div style="flex: 0 0 calc(20% - 1em);">
        [[File:Test image1.jpg|150px|link=Smoky Quartz]]
        <div style="margin-top: 0.5em;">[[Smoky Quartz]]</div>
      </div>
      <div style="flex: 0 0 calc(20% - 1em);">
        [[File:Test image1.jpg|150px|link=Smoky Quartz]]
        <div style="margin-top: 0.5em;">[[Smoky Quartz]]</div>
      </div>
      <div style="flex: 0 0 calc(20% - 1em);">
        [[File:Test image1.jpg|150px|link=Smoky Quartz]]
        <div style="margin-top: 0.5em;">[[Smoky Quartz]]</div>
      </div>
      <div style="flex: 0 0 calc(20% - 1em);">
        [[File:Test image1.jpg|150px|link=Smoky Quartz]]
        <div style="margin-top: 0.5em;">[[Smoky Quartz]]</div>
      </div>
  </div>
</div>
</div>


<div id="mineralien-content" class="mw-collapsible-content" style="display: none; width: 100%; clear: both; margin-bottom: 2em;">
  <div style="display: flex; flex-wrap: wrap; gap: 1em; justify-content: flex-start; padding: 1em; border: 1px solid #ddd; background-color: #f9f9f9;">
      <!-- Image Block Start -->
      <div style="flex: 0 0 calc(20% - 1em);">
        [[File:Test image2.jpg|150px|link=Amethyst]]
        <div style="margin-top: 0.5em;">[[Amethyst]]</div>
      </div>
      <div style="flex: 0 0 calc(20% - 1em);">
        [[File:Test image2.jpg|150px|link=Amethyst]]
        <div style="margin-top: 0.5em;">[[Amethyst]]</div>
      </div>
      <div style="flex: 0 0 calc(20% - 1em);">
        [[File:Test image2.jpg|150px|link=Amethyst]]
        <div style="margin-top: 0.5em;">[[Amethyst]]</div>
      </div>
  </div>
</div>


<div id="fossilien-content" class="mw-collapsible-content" style="display: none; width: 100%; clear: both; margin-bottom: 2em;">
  <div style="display: flex; flex-wrap: wrap; gap: 1em; justify-content: flex-start; padding: 1em; border: 1px solid #ddd; background-color: #f9f9f9;">
      <!-- Image Block Start -->
      <div style="flex: 0 0 calc(20% - 1em);">
        [[File:Test image3.jpg|150px|link=Fossil]]
        <div style="margin-top: 0.5em;">[[Fossil]]</div>
      </div>
      <div style="flex: 0 0 calc(20% - 1em);">
        [[File:Test image3.jpg|150px|link=Fossil]]
        <div style="margin-top: 0.5em;">[[Fossil]]</div>
      </div>
  </div>
</div>


<div id="edelsteine-content" class="mw-collapsible-content" style="display: none; width: 100%; clear: both; margin-bottom: 2em;">
  <div style="display: flex; flex-wrap: wrap; gap: 1em; justify-content: flex-start; padding: 1em; border: 1px solid #ddd; background-color: #f9f9f9;">
      <!-- Image Block Start -->
      <div style="flex: 0 0 calc(20% - 1em);">
        [[File:Test image4.jpg|150px|link=Diamond]]
        <div style="margin-top: 0.5em;">[[Diamond]]</div>
      </div>
      <div style="flex: 0 0 calc(20% - 1em);">
        [[File:Test image4.jpg|150px|link=Diamond]]
        <div style="margin-top: 0.5em;">[[Diamond]]</div>
      </div>
  </div>
</div>
</div>


<!-- Content that follows the collapsible section -->
<div style="width: 100%;">
</div>
</div>
<script>
// Script to handle only one open section at a time
$(document).ready(function() {
  // Reference all toggle elements
  var $toggles = $(".mw-collapsible[data-collapsegroup='mainGroup'] .mw-collapsible-toggle");
 
  // Create handler for clicks
  $toggles.on('click', function() {
    // Get the clicked index
    var index = $toggles.index(this);
   
    // Hide all content sections
    $('.mw-collapsible-content').hide();
   
    // Show only the corresponding content
    var contentIds = ['gestein-content', 'mineralien-content', 'fossilien-content', 'edelsteine-content'];
    $('#' + contentIds[index]).toggle();
   
    // Update visual state of toggles - make all collapsed
    $toggles.parent().parent().addClass('mw-collapsed');
   
    // Remove collapsed class from clicked toggle if its content is visible
    if($('#' + contentIds[index]).is(':visible')) {
      $(this).parent().parent().removeClass('mw-collapsed');
    }
  });
});
</script>

Aktuelle Version vom 22. Mai 2025, 14:44 Uhr


Materials


Natural materials
Holz


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


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


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


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


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