Aktionen

Test3: Unterschied zwischen den Versionen

Aus exmediawiki

← Zum vorherigen VersionsunterschiedZum nächsten Versionsunterschied →
Theo (Diskussion | Beiträge)
515 Bearbeitungen
Keine Bearbeitungszusammenfassung
Theo (Diskussion | Beiträge)
515 Bearbeitungen
Keine Bearbeitungszusammenfassung
Zeile 1: Zeile 1:
<div class="mw-collapsible-content-wrapper" id="collapsibleGroup">
<div style="display: flex; flex-wrap: wrap; gap: 1em; justify-content: space-between; width: 100%;">
<div style="display: flex; flex-wrap: wrap; gap: 1em; justify-content: space-between; width: 100%;">


<!-- First collapsible item -->
<!-- First collapsible item -->
<div class="mw-collapsible mw-collapsed" style="flex: 0 0 calc(25% - 1em); margin-bottom: 1em;">
<div class="mw-collapsible mw-collapsed" style="flex: 0 0 calc(25% - 1em); margin-bottom: 1em;" data-collapsegroup="mainGroup">
   <div class="mw-collapsible-toggle" style="float: none; text-align: center;">
   <div class="mw-collapsible-toggle" style="float: none; text-align: center;">
       <span class="down">
       <span class="down">
Zeile 8: Zeile 9:
         [[File:Test image1.jpg|150px|link=Smoky Quartz]]  
         [[File:Test image1.jpg|150px|link=Smoky Quartz]]  
       </span>
       </span>
  </div>
  <div class="mw-collapsible-content" style="position: absolute; left: 0; width: 100%; margin-top: 0.5em;">
      <div style="display: flex; flex-wrap: wrap; gap: 1em; justify-content: flex-start;">
        <!-- 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>
</div>


<!-- Second collapsible item -->
<!-- Second collapsible item -->
<div class="mw-collapsible mw-collapsed" style="flex: 0 0 calc(25% - 1em); margin-bottom: 1em;">
<div class="mw-collapsible mw-collapsed" style="flex: 0 0 calc(25% - 1em); margin-bottom: 1em;" data-collapsegroup="mainGroup">
   <div class="mw-collapsible-toggle" style="float: none; text-align: center;">
   <div class="mw-collapsible-toggle" style="float: none; text-align: center;">
       <span class="down">
       <span class="down">
         '''Mineralien'''<br>
         '''Mineralien'''<br>
         [[File:Test image1.jpg|150px|link=Smoky Quartz]]  
         [[File:Test image2.jpg|150px|link=Amethyst]]  
       </span>
       </span>
  </div>
  <div class="mw-collapsible-content" style="position: absolute; left: 0; width: 100%; margin-top: 0.5em;">
      <div style="display: flex; flex-wrap: wrap; gap: 1em; justify-content: flex-start;">
        <!-- 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;">[[Amethyst]]</div>
        </div>
        <div style="flex: 0 0 calc(20% - 1em);">
            [[File:Test image1.jpg|150px|link=Smoky Quartz]]
            <div style="margin-top: 0.5em;">[[Amethyst]]</div>
        </div>
        <div style="flex: 0 0 calc(20% - 1em);">
            [[File:Test image1.jpg|150px|link=Smoky Quartz]]
            <div style="margin-top: 0.5em;">[[Amethyst]]</div>
        </div>
      </div>
   </div>
   </div>
</div>
</div>


<!-- Third collapsible item -->
<!-- Third collapsible item -->
<div class="mw-collapsible mw-collapsed" style="flex: 0 0 calc(25% - 1em); margin-bottom: 1em;">
<div class="mw-collapsible mw-collapsed" style="flex: 0 0 calc(25% - 1em); margin-bottom: 1em;" data-collapsegroup="mainGroup">
   <div class="mw-collapsible-toggle" style="float: none; text-align: center;">
   <div class="mw-collapsible-toggle" style="float: none; text-align: center;">
       <span class="down">
       <span class="down">
         '''Fossilien'''<br>
         '''Fossilien'''<br>
         [[File:Test image1.jpg|150px|link=Smoky Quartz]]  
         [[File:Test image3.jpg|150px|link=Fossil]]  
       </span>
       </span>
  </div>
  <div class="mw-collapsible-content" style="position: absolute; left: 0; width: 100%; margin-top: 0.5em;">
      <div style="display: flex; flex-wrap: wrap; gap: 1em; justify-content: flex-start;">
        <!-- 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;">[[Fossil]]</div>
        </div>
        <div style="flex: 0 0 calc(20% - 1em);">
            [[File:Test image1.jpg|150px|link=Smoky Quartz]]
            <div style="margin-top: 0.5em;">[[Fossil]]</div>
        </div>
      </div>
   </div>
   </div>
</div>
</div>


<!-- Fourth collapsible item -->
<!-- Fourth collapsible item -->
<div class="mw-collapsible mw-collapsed" style="flex: 0 0 calc(25% - 1em); margin-bottom: 1em;">
<div class="mw-collapsible mw-collapsed" style="flex: 0 0 calc(25% - 1em); margin-bottom: 1em;" data-collapsegroup="mainGroup">
   <div class="mw-collapsible-toggle" style="float: none; text-align: center;">
   <div class="mw-collapsible-toggle" style="float: none; text-align: center;">
       <span class="down">
       <span class="down">
         '''Edelsteine'''<br>
         '''Edelsteine'''<br>
         [[File:Test image1.jpg|150px|link=Smoky Quartz]]  
         [[File:Test image4.jpg|150px|link=Diamond]]  
       </span>
       </span>
   </div>
   </div>
  <div class="mw-collapsible-content" style="position: absolute; left: 0; width: 100%; margin-top: 0.5em;">
</div>
      <div style="display: flex; flex-wrap: wrap; gap: 1em; justify-content: flex-start;">
 
        <!-- Image Block Start -->
</div>
         <div style="flex: 0 0 calc(20% - 1em);">
 
            [[File:Test image1.jpg|150px|link=Smoky Quartz]]
<!-- Separate container for expanded content -->
            <div style="margin-top: 0.5em;">[[Diamond]]</div>
<div id="gestein-content" class="mw-collapsible-content" style="display: none; width: 100%; clear: both; margin-bottom: 2em;">
         </div>
  <div style="display: flex; flex-wrap: wrap; gap: 1em; justify-content: flex-start; padding: 1em; border: 1px solid #ddd; background-color: #f9f9f9;">
         <div style="flex: 0 0 calc(20% - 1em);">
      <!-- Image Block Start -->
            [[File:Test image1.jpg|150px|link=Smoky Quartz]]
      <div style="flex: 0 0 calc(20% - 1em);">
            <div style="margin-top: 0.5em;">[[Diamond]]</div>
        [[File:Test image1.jpg|150px|link=Smoky Quartz]]
         </div>
         <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 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>
</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>
<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>
<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>

Version vom 19. Mai 2025, 16:49 Uhr

     
        Gestein

         
     

     
        Mineralien

         
     

     
        Fossilien

        Datei:Test image3.jpg 
     

     
        Edelsteine

        Datei:Test image4.jpg

<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>

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