Affichage au clic d'éléments cachés (en css)
Résolu
Vic86
-
Vic86 -
Vic86 -
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.
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.
A voir également:
- Afficher/cacher un div au clic en css
- Windows 11 clic droit afficher plus d'options par défaut - Guide
- Afficher appdata - Guide
- Cacher son numéro - Guide
- Cacher conversation whatsapp - Guide
- Cacher ses amis sur facebook - Guide
6 réponses
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
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
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
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 ?
