j'utilise un script sur mon site qui me permet à partir d'une liste d'afficher du contenu supplémentaire en cliquant sur le titre de la liste.
En gros, il y a du texte dans un <li> en strong, et des sous parties sont cachées dans <dl> et <dt>
Lorsque je clique sur le texte en strong, les sous parties apparaissent.
J'aimerai le modifier pour que je puisse aussi les cacher lorsque je reclique dessus.
Le code JS
Code : Tout sélectionner
$('#show > li > strong').on('click', e => {
const target = $(e.target)
const liElement = target.parent()
const ulElement = liElement.parent()
const hideShow = liElement.find('.hideShow');
ulElement.find('.hideShow').removeAttr('style')
hideShow.toggle('slide')
})Le code CSS
.hideShow {
display: none;
padding-left: 10px;
}
.hideShow > dt {
color: grey;
list-style-image: url(../picto/fleche.gif);
}
.hideShow > dd {
font-size: 0.9em;
color: #7E5109 ;
}
.hideShow > df {
color: red;
}
li > strong {
cursor: pointer;
}
.puce {
list-style: none;
margin-left: 0;
padding-left: 1em;
text-indent: -1em;
}Je pense qu'il faudrait que j'arrive à lui redonner un display:block quelque part, mais je n'arrive pas à trouver.
Merci d'avance
