Difference between revisions of "Template:FAQList"

From Bose Portable PA Encyclopedia
Jump to: navigation, search
m
m
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>
 +
  &nbsp;|&nbsp;
 +
  <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>
 

Revision as of 14:38, 10 February 2026

This template wraps multiple FAQItem entries and provides Expand All / Collapse All using site-level JavaScript in MediaWiki:Common.js.


 Expand all
  | 
 Collapse all

{{{content}}}