|
|
| Zeile 1: |
Zeile 1: |
| <!-- 🔲 Grid Layout for Triggers --> | | <div class="mw-collapsible mw-collapsed"> |
| <div style="display: flex; flex-wrap: wrap; gap: 1em;"> | | <div class="mw-collapsible-toggle" style=" float: none; "> |
| | <span class="down"> |
| | '''Gestein''' |
| | <br> |
| | [[File:Test image1.jpg|300x200px|link=Smoky Quartz]] |
| | </span> |
| | </div> |
| | <div class="mw-collapsible-content"> |
|
| |
|
| <!-- Tile 1 -->
| | <div style="display: flex; flex-wrap: wrap; gap: 1em; justify-content: flex-start;"> |
| <div style="flex: 0 0 calc(20% - 1em); height: 200px;"> | |
|
| |
|
| <div class="mw-collapsible mw-collapsed">
| | <!-- Image Block Start --> |
| <!-- Trigger -->
| |
| <div class="mw-collapsible-toggle" style="float: none;">
| |
| <span class="down">[[File:Test image1.jpg|300x200px|center]]<br>Gestein</span>
| |
| </div>
| |
|
| |
|
| <!-- Empty placeholder to avoid growing tile -->
| | <div style="flex: 0 0 calc(20% - 1em);"> |
| <div class=" mw-collapsible- content" style="display: none;"></div> | | <br> |
| </div>
| | [[File:Test image1.jpg|300x200px|link=Smoky Quartz]] |
| | <div style=" margin- top: 0.5em;"> [[Smoky Quartz]]</div> |
| | </div> |
|
| |
|
| | <div style="flex: 0 0 calc(20% - 1em);"> |
| | <br> |
| | [[File:Test image1.jpg|300x200px|link=Smoky Quartz]] |
| | <div style="margin-top: 0.5em;">[[Smoky Quartz]]</div> |
| </div> | | </div> |
|
| |
|
| <!-- Repeat more tiles as needed --> | | <div style="flex: 0 0 calc(20% - 1em);"> |
| | <br> |
| | [[File:Test image1.jpg|300x200px|link=Smoky Quartz]] |
| | <div style="margin-top: 0.5em;">[[Smoky Quartz]]</div> |
| </div> | | </div> |
|
| |
|
| <!-- 🔻 Expanded Content BELOW Grid --> | | <div style="flex: 0 0 calc(20% - 1em);"> |
| <!-- You can repeat this block for each collapsible item (manually sync them with triggers) --> | | <br> |
| | [[File:Test image1.jpg|300x200px|link=Smoky Quartz]] |
| | <div style="margin-top: 0.5em;">[[Smoky Quartz]]</div> |
| | </div> |
|
| |
|
| <div class="mw-collapsible mw-collapsed"> | | <div style="flex: 0 0 calc(20% - 1em);"> |
| <!-- Toggle hidden to open via same file/tile click -->
| | <br> |
| <div class="mw-collapsible-toggle" style="display: none;"></div> | | [[File:Test image1.jpg|300x200px|link=Smoky Quartz]] |
| | <div style="margin-top: 0.5em;">[[Smoky Quartz]]</div> |
| | </div> |
| | </div> |
|
| |
|
| <!-- Full-width expandable section -->
| | </div> |
| <div class="mw-collapsible-content" style="margin-top: 2em; display: flex; gap: 1em; justify-content: flex-start; flex-wrap: nowrap; overflow-x: auto;">
| |
| | |
| <div style="flex: 0 0 auto; text-align: center;">
| |
| [[File:Test image1.jpg|300x200px|link=Smoky Quartz]]
| |
| <div style="margin-top: 0.5em;">[[Smoky Quartz]]</div>
| |
| </div>
| |
| | |
| <div style="flex: 0 0 auto; text-align: center;">
| |
| [[File:Test image1.jpg|300x200px|link=Smoky Quartz]]
| |
| <div style="margin-top: 0.5em;">[[Smoky Quartz]]</div>
| |
| </div>
| |
| | |
| <div style="flex: 0 0 auto; text-align: center;">
| |
| [[File:Test image1.jpg|300x200px|link=Smoky Quartz]]
| |
| <div style="margin-top: 0.5em;">[[Smoky Quartz]]</div>
| |
| </div>
| |
| | |
| <div style="flex: 0 0 auto; text-align: center;">
| |
| [[File:Test image1.jpg|300x200px|link=Smoky Quartz]]
| |
| <div style="margin-top: 0.5em;">[[Smoky Quartz]]</div>
| |
| </div>
| |
| | |
| <div style="flex: 0 0 auto; text-align: center;">
| |
| [[File:Test image1.jpg|300x200px|link=Smoky Quartz]]
| |
| <div style="margin-top: 0.5em;">[[Smoky Quartz]]</div>
| |
| </div>
| |
| | |
| </div>
| |
| </div> | | </div> |
