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 class="wikitable" style="border: none; background: transparent;">
<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 category -->
<div class="mw-collapsible mw-collapsed" style="flex: 0 0 calc(25% - 1em); margin-bottom: 1em;" data-collapsegroup="mainGroup">
<div style="flex: 0 0 calc(25% - 1em); text-align: center;">
   <div class="mw-collapsible-toggle" style="float: none; text-align: center;">
<div class="mw-collapsible mw-collapsed">
   <div class="mw-collapsible-toggle" style="float: none; text-align: center; cursor: pointer;">
       <span class="down">
       <span class="down">
         '''Gestein'''<br>
         '''Gestein'''<br>
         [[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="display: none;">
      <!-- This is an empty placeholder -->
   </div>
   </div>
</div>
</div>
</div>


<!-- Second collapsible item -->
<!-- Second category -->
<div class="mw-collapsible mw-collapsed" style="flex: 0 0 calc(25% - 1em); margin-bottom: 1em;" data-collapsegroup="mainGroup">
<div style="flex: 0 0 calc(25% - 1em); text-align: center;">
   <div class="mw-collapsible-toggle" style="float: none; text-align: center;">
<div class="mw-collapsible mw-collapsed">
   <div class="mw-collapsible-toggle" style="float: none; text-align: center; cursor: pointer;">
       <span class="down">
       <span class="down">
         '''Mineralien'''<br>
         '''Mineralien'''<br>
Zeile 20: Zeile 26:
       </span>
       </span>
   </div>
   </div>
  <div class="mw-collapsible-content" style="display: none;">
      <!-- This is an empty placeholder -->
  </div>
</div>
</div>
</div>


<!-- Third collapsible item -->
<!-- Third category -->
<div class="mw-collapsible mw-collapsed" style="flex: 0 0 calc(25% - 1em); margin-bottom: 1em;" data-collapsegroup="mainGroup">
<div style="flex: 0 0 calc(25% - 1em); text-align: center;">
   <div class="mw-collapsible-toggle" style="float: none; text-align: center;">
<div class="mw-collapsible mw-collapsed">
   <div class="mw-collapsible-toggle" style="float: none; text-align: center; cursor: pointer;">
       <span class="down">
       <span class="down">
         '''Fossilien'''<br>
         '''Fossilien'''<br>
Zeile 30: Zeile 41:
       </span>
       </span>
   </div>
   </div>
  <div class="mw-collapsible-content" style="display: none;">
      <!-- This is an empty placeholder -->
  </div>
</div>
</div>
</div>


<!-- Fourth collapsible item -->
<!-- Fourth category -->
<div class="mw-collapsible mw-collapsed" style="flex: 0 0 calc(25% - 1em); margin-bottom: 1em;" data-collapsegroup="mainGroup">
<div style="flex: 0 0 calc(25% - 1em); text-align: center;">
   <div class="mw-collapsible-toggle" style="float: none; text-align: center;">
<div class="mw-collapsible mw-collapsed">
   <div class="mw-collapsible-toggle" style="float: none; text-align: center; cursor: pointer;">
       <span class="down">
       <span class="down">
         '''Edelsteine'''<br>
         '''Edelsteine'''<br>
         [[File:Test image4.jpg|150px|link=Diamond]]  
         [[File:Test image4.jpg|150px|link=Diamond]]  
       </span>
       </span>
  </div>
  <div class="mw-collapsible-content" style="display: none;">
      <!-- This is an empty placeholder -->
   </div>
   </div>
</div>
</div>
</div>


</div>
</div>


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


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


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


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


<script>
<!-- Instructions for wiki editors -->
// Script to handle only one open section at a time
{{__NOEDITSECTION__}}
$(document).ready(function() {
{{#tag:imagemap|
  // Reference all toggle elements
Image:Transparent.png|100x100px|
  var $toggles = $(".mw-collapsible[data-collapsegroup='mainGroup'] .mw-collapsible-toggle");
rect 0 0 100 100 [[#gestein-section|Gestein]]
 
desc none
  // Create handler for clicks
}}
  $toggles.on('click', function() {
 
    // Get the clicked index
{{#tag:imagemap|
    var index = $toggles.index(this);
Image:Transparent.png|100x100px|
   
rect 0 0 100 100 [[#mineralien-section|Mineralien]]
    // Hide all content sections
desc none
    $('.mw-collapsible-content').hide();
}}
   
 
    // Show only the corresponding content
{{#tag:imagemap|
    var contentIds = ['gestein-content', 'mineralien-content', 'fossilien-content', 'edelsteine-content'];
Image:Transparent.png|100x100px|
    $('#' + contentIds[index]).toggle();
rect 0 0 100 100 [[#fossilien-section|Fossilien]]
   
desc none
    // Update visual state of toggles - make all collapsed
}}
    $toggles.parent().parent().addClass('mw-collapsed');
 
   
{{#tag:imagemap|
    // Remove collapsed class from clicked toggle if its content is visible
Image:Transparent.png|100x100px|
    if($('#' + contentIds[index]).is(':visible')) {
rect 0 0 100 100 [[#edelsteine-section|Edelsteine]]
      $(this).parent().parent().removeClass('mw-collapsed');
desc none
    }
}}
  });
});
</script>

Version vom 19. Mai 2025, 16:51 Uhr

     
        Gestein

         
     

     
        Mineralien

Vorlage:NOEDITSECTION

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