|
|
| Zeile 1: |
Zeile 1: |
| <!-- Grid Wrapper --> | | <!-- 🔲 Grid Layout for Triggers --> |
| <div style="display: flex; flex-wrap: wrap; gap: 1em;"> | | <div style="display: flex; flex-wrap: wrap; gap: 1em;"> |
|
| |
|
| <!-- Tile 1 (Trigger Only) --> | | <!-- Tile 1 --> |
| <div style="flex: 0 0 calc(20% - 1em); position: relative;"> | | <div style="flex: 0 0 calc(20% - 1em); height: 200px;"> |
|
| |
|
| <div class="mw-collapsible mw-collapsed"> | | <div class="mw-collapsible mw-collapsed"> |
| | | <!-- Trigger --> |
| <!-- Toggler (inside grid) --> | |
| <div class="mw-collapsible-toggle" style="float: none;"> | | <div class="mw-collapsible-toggle" style="float: none;"> |
| <span class="down">[[File:Test image1.jpg|300x200px|center]]<br>Gestein</span> | | <span class="down">[[File:Test image1.jpg|300x200px|center]]<br>Gestein</span> |
| </div> | | </div> |
|
| |
|
| <!-- Collapsible Content (outside of flex layout visually) --> | | <!-- Empty placeholder to avoid growing tile --> |
| <div class="mw-collapsible-content" style="margin-top: 1em; width: 100%; flex-basis: 100%; flex-grow: 1; display: block;"> | | <div class="mw-collapsible-content" style="display: none;"></div> |
| | </div> |
|
| |
|
| <!-- Full-width container -->
| | </div> |
| <div style="display: flex; gap: 1em; justify-content: flex-start; flex-wrap: nowrap; overflow-x: auto; background: #f9f9f9; padding: 1em; border: 1px solid #ccc; border-radius: 6px;"> | |
|
| |
|
| <div style="flex: 0 0 auto; text-align: center;">
| | <!-- Repeat more tiles as needed --> |
| [[File:Test image1.jpg|300x200px|link=Smoky Quartz]]
| | </div> |
| <div style="margin-top: 0.5em;">[[Smoky Quartz]]</div>
| |
| </div>
| |
|
| |
|
| <div style="flex: 0 0 auto; text-align: center;">
| | <!-- 🔻 Expanded Content BELOW Grid --> |
| [[File:Test image1.jpg|300x200px|link=Smoky Quartz]]
| | <!-- You can repeat this block for each collapsible item (manually sync them with triggers) --> |
| <div style="margin-top: 0.5em;">[[Smoky Quartz]]</div>
| |
| </div>
| |
|
| |
|
| <div style=" flex: 0 0 auto; text- align: center;"> | | <div class="mw-collapsible mw-collapsed"> |
| [[File:Test image1.jpg|300x200px|link=Smoky Quartz]]
| | <!-- Toggle hidden to open via same file/tile click --> |
| <div style=" margin-top: 0.5em;"> [[Smoky Quartz]]</div> | | <div class="mw-collapsible-toggle" style=" display: none;"></div> |
| </div>
| |
|
| |
|
| <div style="flex: 0 0 auto; text- align: center; "> | | <!-- Full-width expandable section --> |
| [[File:Test image1.jpg|300x200px|link=Smoky Quartz]]
| | <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="margin-top: 0.5em;">[[Smoky Quartz]]</div>
| |
| </div>
| |
|
| |
|
| <div style="flex: 0 0 auto; text-align: center;"> | | <div style="flex: 0 0 auto; text-align: center;"> |
| [[File:Test image1.jpg|300x200px|link=Smoky Quartz]]
| | [[File:Test image1.jpg|300x200px|link=Smoky Quartz]] |
| <div style="margin-top: 0.5em;">[[Smoky Quartz]] </div> | | <div style="margin-top: 0.5em;">[[Smoky Quartz]]</div> |
| </div>
| |
| | |
| </div>
| |
| </div> | | </div> |
|
| |
|
| </div>
| | <div style="flex: 0 0 auto; text- align: center;"> |
| | | [[File:Test image1.jpg|300x200px|link=Smoky Quartz]] |
| </div>
| | <div style="margin-top: 0.5em;">[[Smoky Quartz]]</div> |
| <!-- Repeat Tile divs as needed -->
| |
| <!-- Tile 1 (Trigger Only) -->
| |
| <div style="flex: 0 0 calc(20% - 1em); position: relative;"> | |
| | |
| <div class="mw-collapsible mw-collapsed">
| |
| | |
| <!-- Toggler (inside grid) -->
| |
| <div class="mw-collapsible-toggle" style="float: none;">
| |
| <span class="down">[[File:Test image1.jpg|300x200px|center]]<br>Gestein</span> | |
| </div> | | </div> |
|
| |
|
| <!-- Collapsible Content (outside of flex layout visually) -->
| | <div style="flex: 0 0 auto; text-align: center;"> |
| <div class="mw-collapsible-content" style="margin-top: 1em; width: 100%; flex-basis: 100%; flex-grow: 1; display: block;"> | | [[File:Test image1.jpg|300x200px|link=Smoky Quartz]] |
| | | <div style="margin-top: 0.5em;">[[Smoky Quartz]]</div> |
| <!-- Full-width container -->
| |
| <div style="display: flex; gap: 1em; justify-content: flex-start; flex-wrap: nowrap; overflow-x: auto; background: #f9f9f9; padding: 1em; border: 1px solid #ccc; border-radius: 6px;">
| |
| | |
| <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> |
|
| |
|
| </div>
| | <div style="flex: 0 0 auto; text- align: center;"> |
| | | [[File:Test image1.jpg|300x200px|link=Smoky Quartz]] |
| </div>
| | <div style="margin-top: 0.5em;">[[Smoky Quartz]]</div> |
| <!-- Tile 1 (Trigger Only) -->
| |
| <div style="flex: 0 0 calc(20% - 1em); position: relative;"> | |
| | |
| <div class="mw-collapsible mw-collapsed">
| |
| | |
| <!-- Toggler (inside grid) -->
| |
| <div class="mw-collapsible-toggle" style="float: none;">
| |
| <span class="down">[[File:Test image1.jpg|300x200px|center]]<br>Gestein</span> | |
| </div> | | </div> |
|
| |
|
| <!-- Collapsible Content (outside of flex layout visually) -->
| | <div style="flex: 0 0 auto; text-align: center;"> |
| <div class="mw-collapsible-content" style="margin-top: 1em; width: 100%; flex-basis: 100%; flex-grow: 1; display: block;"> | | [[File:Test image1.jpg|300x200px|link=Smoky Quartz]] |
| | | <div style="margin-top: 0.5em;">[[Smoky Quartz]]</div> |
| <!-- Full-width container -->
| |
| <div style="display: flex; gap: 1em; justify-content: flex-start; flex-wrap: nowrap; overflow-x: auto; background: #f9f9f9; padding: 1em; border: 1px solid #ccc; border-radius: 6px;">
| |
| | |
| <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> |
|
| |
|
| </div> | | </div> |
|
| |
| </div>
| |
|
| |
|
| |
| </div>
| |
|
| |
|
| |
| <div class="collapse-pre-one mw-collapsible">
| |
| <div class="mw-collapsible-toggle" style="float: none;">
| |
| <span class="down">[[File:Collapse-small-silver.png|12px|left|link=]] show less</span>
| |
| <span class="up">[[File:Expand-small-silver.png|12px|left|link=]] show more</span>
| |
| </div>
| |
| <div class="mw-collapsible-content">
| |
| {{Lorem}}
| |
| </div>
| |
| </div> | | </div> |
