« Modèle:Boîte déroulante » : différence entre les versions
De 21Wiki
Aucun résumé des modifications Balise : Éditeur de wikicode 2017 |
Aucun résumé des modifications Balise : Éditeur de wikicode 2017 |
||
Ligne 1 : | Ligne 1 : | ||
{ | <style> | ||
div.toggleBox h3 { | |||
font-size: 110%; | |||
font-weight: bold; | |||
cursor: pointer; | |||
margin: 0; | |||
} | |||
div.toggleBox.collapsedBox h3:before { | |||
content: "▶"; | |||
} | } | ||
. | div.toggleBox h3:before { | ||
content: "▼"; | |||
display: inline-block; | |||
margin-right: .3em; | |||
} | } | ||
. | div.toggleBox pre { | ||
display: none; | display: none; | ||
} | } | ||
</style> | </style> | ||
= | <div class="toggleBox" style="border:1px solid black;padding:1em;"> | ||
< | <h3 onclick="toggleBox(this)">Titre de la boîte</h3> | ||
function toggleBox( | <pre> | ||
<nowiki> | |||
{| class="wikitable" | |||
! Entête 1 !! Entête 2 !! Entête 3 | |||
|- | |||
| Ligne 1, cellule 1 || Ligne 1, cellule 2 || Ligne 1, cellule 3 | |||
|- | |||
| Ligne 2, cellule 1 || Ligne 2, cellule 2 || Ligne 2, cellule 3 | |||
|} | |||
</nowiki> | |||
</pre> | |||
</div> | |||
<script> | |||
function toggleBox(elem) { | |||
var box = elem.parentNode; | |||
var pre = box.getElementsByTagName('pre')[0]; | |||
if (box.className.indexOf('collapsedBox') > -1) { | |||
box.className = box.className.replace('collapsedBox',''); | |||
pre.style.display = 'block'; | |||
} else { | |||
box.className += 'collapsedBox'; | |||
pre.style.display = 'none'; | |||
} | |||
} | } | ||
</script> | </script> | ||
Version du 3 mars 2023 à 12:08
<style> div.toggleBox h3 {
font-size: 110%; font-weight: bold; cursor: pointer; margin: 0;
}
div.toggleBox.collapsedBox h3:before {
content: "▶";
}
div.toggleBox h3:before {
content: "▼"; display: inline-block; margin-right: .3em;
}
div.toggleBox pre {
display: none;
} </style>
Titre de la boîte
{| class="wikitable" ! Entête 1 !! Entête 2 !! Entête 3 |- | Ligne 1, cellule 1 || Ligne 1, cellule 2 || Ligne 1, cellule 3 |- | Ligne 2, cellule 1 || Ligne 2, cellule 2 || Ligne 2, cellule 3 |}
<script>
function toggleBox(elem) { var box = elem.parentNode; var pre = box.getElementsByTagName('pre')[0]; if (box.className.indexOf('collapsedBox') > -1) { box.className = box.className.replace('collapsedBox',); pre.style.display = 'block'; } else { box.className += 'collapsedBox'; pre.style.display = 'none'; } }
</script>