Toggle menu
Toggle preferences menu
Toggle personal menu
Not logged in
Your IP address will be publicly visible if you make any edits.

Template:CollapsibleHeader: Difference between revisions

Template page
Created page with "<div class="mw-collapsible mw-collapsed"> <h2> <span class="mw-collapsible-toggle" style="cursor: pointer;"> <span class="mw-collapsible-arrow">↓</span> <!-- Down arrow for collapsed state --> </span> {{{header}}} </h2> <div class="mw-collapsible-content"> {{{content}}} </div> </div> <script> document.querySelectorAll('.mw-collapsible-toggle').forEach(function(toggle) { toggle.addEventListener('click', function() { var parent = this.closest('.mw-collapsible'); va..."
 
No edit summary
 
(11 intermediate revisions by the same user not shown)
Line 1: Line 1:
<div class="mw-collapsible mw-collapsed">
<div class="mw-collapsible mw-collapsed">
<h2>
<h2 class="mw-collapsible-header" style="cursor: pointer;">
<span class="mw-collapsible-toggle" style="cursor: pointer;">
<span class="mw-collapsible-arrow">&#x2193;</span> <!-- Down arrow for collapsed state -->
</span>
{{{header}}}
{{{header}}}
</h2>
</h2>
<div class="mw-collapsible-content">
<div class="mw-collapsible-content" style="display: none;">
{{{content}}}
{{{content}}}
</div>
</div>
</div>
</div>
<script>
document.querySelectorAll('.mw-collapsible-toggle').forEach(function(toggle) {
toggle.addEventListener('click', function() {
var parent = this.closest('.mw-collapsible');
var content = parent.querySelector('.mw-collapsible-content');
var arrow = this.querySelector('.mw-collapsible-arrow');
if (content.style.display === 'none') {
content.style.display = 'block';
arrow.innerHTML = '&#x2193;'; // Down arrow (expand)
} else {
content.style.display = 'none';
arrow.innerHTML = '&#x2191;'; // Up arrow (collapse)
}
});
});
</script>

Latest revision as of 23:17, 9 February 2025

{{{header}}}

Cookies help us deliver our services. By using our services, you agree to our use of cookies.