Chalut chalut!

J'aimerai créer un effet "Spoiler" uniquement en CSS, afin d'afficher mon formulaire pour ajouter un commentaire, au moment d'un clic sur un bouton.

J'ai trouvé ce tuto, mais je ne comprends pas trop comment fait le mec

Est-ce que quelqu'un pourrait m'expliquer comment faire ?

Voila voila!

Tu as un tuto. Suis-le. Non ?

Citation : AkaiKen

Tu as un tuto. Suis-le. Non ?

Oui mais j'y comprends rien, peux d'explications et tout

Dans un premier temps, copie le code tel quel. Ensuite, tu comprendras comment ça fonctionne, en le faisant marcher, en jouant avec.

Citation : AkaiKen

Dans un premier temps, copie le code tel quel. Ensuite, tu comprendras comment ça fonctionne, en le faisant marcher, en jouant avec.

D'accord, bon bin je vais essayer, et je vous tiens au courant

tout d'abord est ce que vous savez du css et javascript ?
si non je vous conseille d'apprendre les langages avant de commencer la programmation.

@Darrkangel : Déjà le 3 ème sujet où tu dis des bêtises, arrête stp.

Développement Web : HTML/CSS, PHP, Javascript, Flash (etc...).
Programmation : C, C++, C#, Python (etc...).

J'ai trouvé la réponse en posant une autre question dans la section Javascript:

http://www.siteduzero.com/forum-83-751 [...] html#r7233262

Citation : Y0upilala

J'ai trouvé la réponse en posant une autre question dans la section Javascript:

http://www.siteduzero.com/forum-83-751 [...] html#r7233262

Bah oui, mais là ce n'est plus un spoiler en css uniquement ceci dit, cela marche sûrement très bien et c'est tant mieux pour toi.

Citation : AkaiKen

Citation : Y0upilala

J'ai trouvé la réponse en posant une autre question dans la section Javascript:

http://www.siteduzero.com/forum-83-751 [...] html#r7233262

Bah oui, mais là ce n'est plus un spoiler en css uniquement ceci dit, cela marche sûrement très bien et c'est tant mieux pour toi.

Oui, ce n'est plus du CSS, mais du Javascript. Je pense qu'en CSS, c'est pas mal galère à faire et tout et tout

Oulà, un peu tard je découvre ce post, désolé^^

Ma page sur le spoiler 100% CSS utilise les les « id » en html.

Si on a un objet avec l’ID « coucou », et qu’on ajoute au bout de l’url un « #coucou », alors le navigateur scrolle la page directement à l’endroit où se trouve l’élément avec l’ID « coucou ».
On dit alors que l’élément en question est ciblé par le navigateur (target = cible)

Le fait d’être ciblé par le navigateur se traduit en CSS par une pseudo class « :target ».
Un peu comme le fait d’être survolé par le pointeur se traduit par une pseudo classe « :hover ».

À partir de là, on peut utiliser des styles CSS sur un élément ciblé.

C’est là qu’intervient mon idée du spoiler : si l’élement est ciblé, on affiche le <div> contenu dedans (le spoiler est ouvert).
Pour le refermer, il suffit de supprimer le ciblage, ou de cibler autre chose « #salut » au lieu de « #coucou » par exemple, et le spoiler se referme.

Voilà.

Ce spoiler 100% CSS est très basique, utilisé ici simplement pour démontrer un aspect du CSS. Si tu veux un bon spoiler, le JavaScript est en effet plus utile.

Salut,

on peut faire ça aussi sans javascript et compatible tout navigateur/version (ce qui n'est pas le cas de :target) :

.texte {
  width: 100px;
  height: 100px;
  position: relative;
  text-align: center;
  line-height: 100px;
}
.texte span {
  display:block;
  background: #333;
  color: #fff;
  width: 100px;
  position:absolute;
  top:0;
  left:0;
}
.texte:hover span {
  display:none;
}

<p class="texte">Tricheur !
  <span>Spoiler</span>
</p>

@ronamazona : mieux, avec un bouton "input" et la pseudo classe :focus : au moins ça reste visible plus longtemps.

Citation : le hollandais volant

@ronamazona : mieux, avec un bouton "input" et la pseudo classe :focus : au moins ça reste visible plus longtemps.

Ah, pas bête oui

<couleur="rouge">BLACK