Template:FAQItem: Difference between revisions
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 --> | ||
<!-- | <!-- Anchor --> | ||
<span id="{{anchorencode:{{{question}}}}}"></span> | |||
< | <!-- FAQ block --> | ||
<details class="faq-item"> | <details class="faq-item"> | ||
<summary style="font-weight: bold; font-size:larger;"> | <summary style="font-weight: bold; font-size:larger;"> | ||
{{ | {{{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="{{ | <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"> | ||
{{ | {{{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> | ||
Revision as of 01:00, 27 February 2026
Creates a FAQ item with collapsible details and a permalink
| Parameter | Description | Type | Status | |
|---|---|---|---|---|
| Question | question | The Question | String | required |
| Answer | answer | The Answer to the question | String | required |
FAQItem usage
- Copy text between the horizontal lines for each Question with Answer
- Put the Question after | question =
- 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>