Sjabloon:Uitklappen
Voordat dit werkt, kan je de onderstaande code in je eigen voorkeuren zetten. Mediawiki:Common.js
var UitklapDivHide = 'Inklappen';
var UitklapDivShow = 'Uitklappen';
// shows and hides content of Uitklap divs
// Parameters:
// indexUitklapDiv: the index of Uitklap div to be toggled
var toggleUitklapDiv = window.toggleUitklapDiv = function(indexUitklapDiv) {
var UitklapToggle = document.getElementById('UitklapToggle' + indexUitklapDiv);
var UitklapFrame = document.getElementById('UitklapFrame' + indexUitklapDiv);
var UitklapChild;
if (!UitklapFrame || !UitklapToggle) {
return false;
}
// if shown now
if (UitklapToggle.firstChild.data === UitklapDivHide) {
for (
UitklapChild = UitklapFrame.firstChild;
UitklapChild !== null;
UitklapChild = UitklapChild.nextSibling
) {
if (UitklapChild.className === 'UitklapContent') {
UitklapChild.style.display = 'none';
}
if (UitklapChild.className === 'UitklapToggle') {
UitklapChild.firstChild.data = UitklapDivShow;
}
}
// if hidden now
} else if (UitklapToggle.firstChild.data === UitklapDivShow) {
for (
UitklapChild = UitklapFrame.firstChild;
UitklapChild !== null;
UitklapChild = UitklapChild.nextSibling
) {
if (UitklapChild.className === 'UitklapContent') {
UitklapChild.style.display = 'block';
}
if (UitklapChild.className === 'UitklapToggle') {
UitklapChild.firstChild.data = UitklapDivHide;
}
}
}
};
// adds show/hide-button to navigation bars
function createUitklapDivToggleButton() {
var indexUitklapDiv = 0;
var i, u, UitklapFrame;
// iterate over all < div >-elements
for (i = 0; (UitklapFrame = document.getElementsByTagName('div')[i]); i++) {
// if found a navigation bar
if (UitklapFrame.className === 'UitklapFrame' || UitklapFrame.className === 'UitklapFrameNoClear') {
indexUitklapDiv++;
var UitklapToggle = document.createElement('a');
UitklapToggle.className = 'UitklapToggle';
UitklapToggle.setAttribute('id', 'UitklapToggle' + indexUitklapDiv);
$(UitklapToggle).data('mwUitklapFrameIndex', indexUitklapDiv).click(function (e) {
toggleUitklapDiv($(this).data('mwUitklapFrameIndex'));
e.preventDefault();
});
var UitklapToggleText = document.createTextNode(UitklapDivHide);
UitklapToggle.appendChild(UitklapToggleText);
// add NavToggle-Button as first div-element
// in < div class="UitklapFrame" >
UitklapFrame.insertBefore(UitklapToggle, UitklapFrame.firstChild);
UitklapFrame.setAttribute('id', 'UitklapFrame' + indexUitklapDiv);
}
}
for (u = 1; u <= indexUitklapDiv; u++) {
toggleUitklapDiv(u);
}
}
$(createUitklapDivToggleButton);
En in de Mediawiki:Common.css moet dit gezet worden. Kopieer de code vanuit de brontekst! Anders werkt het niet.
div.UitklapFrame {
clear: both;
margin: 0;
padding: 0;
border: 1px solid #aaa;
border-collapse: collapse;
background-color: #f9f9f9;
font-size: 95%;
}
div.UitklapFrameNoClear {
margin: 0;
padding: 0;
border: 1px solid #aaa;
border-collapse: collapse;
background-color: #f9f9f9;
font-size: 95%;
}
div.UitklapFrame div.UitklapHead {
padding: 0 .5em;
text-align: center;
font-weight: bold;
background-color: #ddd;
}
div.UitklapFrame div.UitklapContent {
padding: 5px;
}
div.UitklapEind {
clear: both;
}
a.UitklapToggle {
float: right;
padding: 0 .5em;
}
a.UitklapToggle:hover{
cursor: pointer;
}