Template:FAQItem: Difference between revisions

From Bose Portable PA Encyclopedia
Jump to navigation Jump to search
mNo edit summary
Tag: Reverted
mNo edit summary
Tag: Reverted
Line 44: Line 44:


<!-- Generate a stable anchor ID from the question text -->
<!-- Generate a stable anchor ID from the question text -->
<!-- Precompute everything BEFORE entering HTML mode -->
<!-- Anchor -->
{{#vardefine:frag|{{anchorencode:{{{question}}}}} }}
<span id="{{anchorencode:{{{question}}}}}"></span>
{{#vardefine:q|{{{question}}}}}
{{#vardefine:a|{{{answer}}}}}


<span id="{{#var:frag}}"></span>
<!-- FAQ block -->
 
<html>
<details class="faq-item">
<details class="faq-item">


<summary style="font-weight: bold; font-size:larger;">
<summary style="font-weight: bold; font-size:larger;">
{{#var:q}}
{{{question}}}
</summary>
</summary>


<div style="margin:0.5em 0 1em 0; font-size:smaller; opacity:0.7;">
<div style="margin:0.5em 0 1em 0; font-size:smaller; opacity:0.7;">
     <a href="#" class="copy-link" data-frag="{{#var:frag}}">
     <a href="#" class="copy-link" data-frag="{{anchorencode:{{{question}}}}}">
         Copy link to this question
         Copy link to this question
     </a>
     </a>
Line 65: Line 61:


<blockquote class="faq-answer">
<blockquote class="faq-answer">
{{#var:a}}
{{{answer}}}
</blockquote>
</blockquote>


</details>
</details>


<!-- Script (allowed in wikitext) -->
<script>
<script>
document.addEventListener('DOMContentLoaded', function() {
document.addEventListener('DOMContentLoaded', function() {
Line 87: Line 84:
});
});
</script>
</script>
</html>

Revision as of 01:00, 27 February 2026

Creates a FAQ item with collapsible details and a permalink

Template parameters[Edit template data]

ParameterDescriptionTypeStatus
Questionquestion

The Question

Stringrequired
Answeranswer

The Answer to the question

Stringrequired

FAQItem usage

  1. Copy text between the horizontal lines for each Question with Answer
  2. Put the Question after | question =
  3. Put the Answer after | answer =

{{FAQItem

| question =

| answer =

}}


The FAQItem will render as it appears below this line.



<details class="faq-item">

<summary style="font-weight: bold; font-size:larger;"> {{{question}}} </summary>

   <a href="#" class="copy-link" data-frag="{{{question}}}">
       Copy link to this question
   </a>

{{{answer}}}

</details>

<script> document.addEventListener('DOMContentLoaded', function() {

   document.querySelectorAll('.copy-link').forEach(function(link) {
       link.addEventListener('click', function(e) {
           e.preventDefault();
           const frag = this.getAttribute('data-frag');
           const url = window.location.origin + window.location.pathname + '#' + frag;
           navigator.clipboard.writeText(url).then(() => {
               const original = this.innerText;
               this.innerText = 'Copied!';
               setTimeout(() => { this.innerText = original; }, 1500);
           });
       });
   });

}); </script>