|
|
| Line 1: |
Line 1: |
| <noinclude> | | <noinclude> |
| This template wraps multiple FAQItem entries and provides a pure‑CSS | | This template wraps multiple FAQItem entries and provides Expand All / Collapse All |
| Expand All / Collapse All toggle using the checkbox hack. | | using site-level JavaScript in MediaWiki:Common.js. |
| | |
| Usage:
| |
| | |
| <nowiki>{{FAQList|
| |
| content =
| |
| {{FAQItem|question=...|answer=...}}
| |
| {{FAQItem|question=...|answer=...}}
| |
| }}</nowiki>
| |
| </noinclude> | | </noinclude> |
|
| |
|
| <html> | | <div class="faq-list"> |
| <style>
| |
| .faq-toggle { display:none; }
| |
| .faq-toggle + label {
| |
| cursor:pointer;
| |
| font-weight:bold;
| |
| display:inline-block;
| |
| margin:0.5em 0;
| |
| }
| |
| .faq-collapsed,
| |
| .faq-expanded { display:none; }
| |
| .faq-toggle:not(:checked) ~ .faq-collapsed { display:block; }
| |
| .faq-toggle:checked ~ .faq-expanded { display:block; }
| |
| </style>
| |
|
| |
|
| <!-- Hidden checkbox controls which block is visible --> | | <div class="faq-controls"> |
| <input type="checkbox" id="faq-toggle" class="faq-toggle" /> | | <span class="faq-expand-all" style="cursor:pointer; font-weight:bold;">Expand all</span> |
| | | |
| | <span class="faq-collapse-all" style="cursor:pointer; font-weight:bold;">Collapse all</span> |
| | </div> |
|
| |
|
| <!-- Toggle label -->
| | {{{content}}} |
| <label for="faq-toggle">
| |
| <span class="expand-text">Expand all</span>
| |
| <span class="collapse-text">Collapse all</span>
| |
| </label>
| |
| | |
| <!-- Collapsed version (normal FAQItems) -->
| |
| <div class="faq-collapsed">
| |
| </html>{{{content}}}<html>
| |
| </div>
| |
|
| |
|
| <!-- Expanded version (all items forced open) -->
| |
| <div class="faq-expanded">
| |
| <details open>
| |
| </html>{{{content}}}<html>
| |
| </details>
| |
| </div> | | </div> |
| </html>
| |