Affichage au clic d'éléments cachés (en css)
Résolu/Fermé
A voir également:
- Afficher/cacher un div au clic en css
- Windows 11 clic droit afficher plus d'options par défaut - Guide
- Cacher conversation whatsapp - Guide
- Cacher application android - Guide
- Afficher appdata - Guide
- Afficher mot de passe wifi android - Guide
6 réponses
Pilow
Messages postés
400
Date d'inscription
vendredi 2 octobre 2009
Statut
Membre
Dernière intervention
23 décembre 2009
71
30 nov. 2009 à 16:16
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
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
Impli
Messages postés
235
Date d'inscription
mardi 24 novembre 2009
Statut
Membre
Dernière intervention
18 août 2013
34
30 nov. 2009 à 16:18
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.
et tu définis le style hidden par defaut dans ton CSS.
JavaScript est nécessaire pour un bon rendu.
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
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
Pilow
Messages postés
400
Date d'inscription
vendredi 2 octobre 2009
Statut
Membre
Dernière intervention
23 décembre 2009
71
1 déc. 2009 à 15:32
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
Tout depend de ce que tu fais avec
Pilow
Messages postés
400
Date d'inscription
vendredi 2 octobre 2009
Statut
Membre
Dernière intervention
23 décembre 2009
71
1 déc. 2009 à 15:28
1 déc. 2009 à 15:28
Et bien c'est comme Impli l'a dit :)
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;"
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;"
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question
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.
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.
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 ?
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 ?