Forum d'entraide PHPFrance

Bonjour,

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

utiliser $(this) à la place de toute cette recherche (lielement, ulelement etc)

Faire (du moins c'est ce que je fais):

Code : Tout sélectionner

$(document).on('click','la balise strong',function(){
$(this).next() (ou next("selecteur")).toggle(); (ya aussi slideToggle() qui est intéressant)
});

Forum d'entraide PHPFrance

Montrer le contenu d'une liste puis la cacher

Montrer le contenu d'une liste puis la cacher

Re: Montrer le contenu d'une liste puis la cacher