Discussion :

[Wefalck]

Bonjour,

Je suis en train de faire un texte en accordéon. J'ai réussi à faire ce que je souhaitais mais j'aimerais caché le "Voir plus" quand celui-ci a été cliqué et que le texte caché apparait.

Voici le

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
<div id="parent">
  <p>Texte parent</p>
</div>
<p><a a href="#plus">Voir plus</a></p>
<div id="plus" class="accordeon">
  <p>Texte enfant</p>
  <a href="#parents">Voir moins</a>
</div>

Et le

Code CSS :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
.accordeon {
/* par défaut les définitions sont masquées mais conservées dans le flux. Ce qui permet aux "robots" d'accéder à ce contenu. */
  position: absolute;
  border: 0;
  height: 1px;
  width: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(1px 1px 1px 1px); /* IE6 & IE7 */
  clip: rect(1px, 1px, 1px, 1px);
}
.accordeon:target {
  position: relative;
  height: auto;
  padding: initial;
  width: 45%;
  clip: initial;
}

Merci à vous.

Philippe

[plugin and play]

Il existe principalement deux méthodes pour cacher un élément HTML visible en CSS : on peut soit régler la valeur de la propriété visibility de l'élément sur visibility: hidden , soit régler son type d'affichage sur display: none