Posez votre question Signaler

Affichage au clic d'éléments cachés (en css) [Résolu]

Vic86 - Dernière réponse le 1 déc. 2009 à 15:53
Bonjour,
Je souhaiterais que lorsqu'on clique sur une zone de texte en particulier cela affiche une autre zone de texte qui était auparavant cachée. Cela uniquement avec du css.
Exemple :
Cliquer ici pour afficher la réponse (si on clique sur le texte précédent cela affiche la réponse)
REPONSE (la réponse était cachée avant que l'utilisateur ait cliqué sur le texte précédent)
Savez-vous comment cela serait possible ?
Merci pour vos réponses.
Lire la suite 

Affichage au clic d'éléments cachés (en css) »

7 réponses
Réponse
+2
moins plus
Pilow 365Messages postés 2 octobre 2009Date d'inscription 30 nov. 2009 à 16:16
Bonjour,

Cela est très simple en javascript en modifiant le style d'un div.
Cela revient a modifier le CSS en javascript.

Sinon UNIQUEMENT en css tu peux t'ammuser avec le "hover" mais c'est assez exhaustif je trouve et cela n'apparaitra que si tu laisse ta souris sur le premier texte

Ajouter un commentaire
Ajouter un commentaire
Réponse
+1
moins plus
Impli 98Messages postés 24 novembre 2009Date d'inscription 30 nov. 2009 à 16:18
GetElementById('ton_id').style.visibility = 'show';

et tu définis le style hidden par defaut dans ton CSS.

JavaScript est nécessaire pour un bon rendu.

 Ajouter un commentaire
Ajouter un commentaire
Réponse
+1
moins plus
Flav86 1 déc. 2009 à 15:24
ton Javascript:
function affiche_forme ()
{
if (document.getElementById("maforme").style.display='none')

{document.getElementById("maforme").style.display ='inline';
}
}

Bien sur avec pour id de ta div à cacher "maforme"
et évenement sur ta première zone de texte : onClick=affiche_forme()
et enfin dans ton CSS pour ta div "maforme": #maforme{ display:none;}


Arretez moi si je me trompe

 Ajouter un commentaire
Pilow- 1 déc. 2009 à 15:32
Oui ça marche pareil, moi j'aime juste pas le display car un display = none fait comme si il n'y avait rien, tous les autres éléments bougent alors en comblant l'espace et au moment de l'affichage tout se remet en place, alors qu'un visibility = hidden met juste en transparent la zone en gardant une place reservée on va dire.

Tout depend de ce que tu fais avec
Ajouter un commentaire
Réponse
+1
moins plus
Pilow 365Messages postés 2 octobre 2009Date d'inscription 1 déc. 2009 à 15:28
Et bien c'est comme Impli l'a dit :) 

document.getElementById('ton_id').style.visibility = 'visible';


Description :
document : ta page actuel
getElementById() : L'objet de ta page correspondant a l'id indiqué
style : Tu modifie un effet de style
visibility : Tu veux modifier le fait qu'il soit visible ou non
= 'visible' : Tu le met a visible


Imaginons tu ai deux zone de texte :

La première tu la déclare normal et tu rajoute : onClick="javascript:document.getElementById('TOTO').style.visibility = 'visible';"
et le deuxième tu lui donne comme id TOTO et tu rajoute : style="visibility:hidden;"

Ajouter un commentaire
Ajouter un commentaire
Réponse
+0
moins plus
Vic86 1 déc. 2009 à 15:19
Bonjour,

Merci pour vos réponses.

@Pilow : Est-ce que tu veux bien m'expliquer un peu plus précisément comment on fait en javascript si c'est effectivement très simple ?

@Impli : Je ne comprends pas bien comment fonctionne : GetElementById('ton_id').style.visibility = 'show'; à savoir où cela se place dans la page et comment définir le style hidden par défaut.

Merci si vous pouvez me donner davantage de détails.

 Ajouter un commentaire
Ajouter un commentaire
Réponse
+0
moins plus
Vic86 1 déc. 2009 à 15:53
Ok très bien merci à tous les 2.

Voici ce que j'ai fait comme code grâce à votre aide :

<html>
<head>
<title>Test</title>

<style type="text/css">
.cache{display:none;}
</style>

<script type="text/javascript">
function affiche_reponse ()
{
document.getElementById("reponse").style.display ='inline';
}
</script>
</head>

<body>
<p onClick=affiche_reponse()>Cliquer ici pour afficher la réponse </p>
<p id="reponse" class="cache">Texte de la réponse</p>
</body>
</html>

Cela n'utilise pas que du css mais cela me convient très bien.

Y voyez-vous un défaut ?

 Ajouter un commentaire
Ajouter un commentaire
Posez votre question
Ce document intitulé « Affichage au clic d'éléments cachés (en css) » issu de CommentCaMarche (www.commentcamarche.net) est mis à disposition sous les termes de la licence Creative Commons. Vous pouvez copier, modifier des copies de cette page, dans les conditions fixées par la licence, tant que cette note apparaît clairement.
Dossier à la une
Passage au tout numérique : quel coût pour les particuliers ?