La balise <details> affiche à la demande des précisions sur un texte.
Elle fonctionne avec Google Chrome, mais elle a besoin d’un script pour
être prise en compte dans Firefox.
Le script à insérer
<script>
$(document).ready(function() {
if (!('open' in document.createElement('details'))) {
$("details").each(function() {
$(this).find("summary").show().click(function() {
$(this).siblings().toggle();
$(this).parent('details').toggleClass('open');
});
var opened = $(this).attr("open");
if(opened==undefined) {
$(this).children().hide();
$(this).children("summary").show();
}
});
}
});
</script>
Le code html
<details>
<summary>Sommaire</summary>
<p>Descriptif</p>
</details>
Le css
details {
padding-left: 1em;
position: relative;
display: block;
border: 1px solid #ccc;
background:#44475A;
border-radius: 5px;
}
details > * {
display: none;
}
details.open > *,
details[open] > * {
display: block;
}
details > summary:first-child {
display: block;
font-weight: bold;
color: #999;
cursor: pointer;
}
details > summary:first-child:before {
content: "▸ ";
font-size:1.5em;
}
details[open] > summary:first-child:before,
details.open > summary:first-child:before {
content: "▾ ";
font-size:1.5em;
}
Le résultat
Le W3C
W3C signifie World Wide Web Consortium.