Afficher/Cacher un div(element) en javascript
ybouane Afficher/Cacher un div(element) en javascript Note : 3.2/5 (2 votes) Derniéres modifications : 03/04/2009 à 23:13:24 Mots-Clés : afficher cacher visible visibility style css display none hidden bouton affiche cache lien div bloc elements js css texte Bonjour, Dans ce script, je vais vous montrer comment faire un bouton qui permet d'afficher/cacher du texte en javascript. visibility est la fonction qui permet d'afficher et cacher des éléments (X)html en javascript. Lors du clic sur le bouton, le contenu de celui-ci vas lui aussi être modifié grace à la fonction innerHTML. Bon voici les codes: afficher_cacher_div.html: Code: (X)html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Afficher / Cacher une boite div en javascript</title> <link rel="stylesheet" media="all" title="style de la page" href="afficher_cacher_div.css" /> <script type="text/javascript" src="afficher_cacher_div.js"></script> </head> <body> <span class="bouton" id="bouton_texte" onclick="javascript:afficher_cacher('texte');">Afficher le texte</span> <div id="texte" class="texte"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas nisl. Phasellus quis nulla sit amet leo pretium tincidunt. Quisque eleifend augue quis urna. Curabitur rhoncus quam ac odio. In a nisi et purus fermentum aliquet. Donec sed leo aliquet lacus sollicitudin rhoncus. Duis ultricies euismod odio. Suspendisse potenti. Cras interdum, diam quis porta interdum, elit urna tincidunt ipsum, quis pharetra sem dui ac tortor. Cras lacus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ipsum. Aliquam volutpat turpis at ante. Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br /><br /> Nullam in est vel dui dignissim pretium. Vestibulum at augue. Quisque pellentesque leo id mauris. Sed elit felis, posuere in, pharetra at, auctor vitae, massa. Nam faucibus ipsum eget libero. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer elementum. In hac habitasse platea dictumst. Nunc interdum massa nec mi. Donec luctus nunc ac odio. Nulla id metus vel augue placerat elementum. Duis et lectus ut libero porttitor dictum. Aliquam faucibus, magna pharetra bibendum suscipit, mi libero vehicula enim, ornare tristique odio est eget tellus. Maecenas arcu nisl, dictum sit amet, luctus sit amet, tincidunt tincidunt, mauris. Cras purus lacus, hendrerit et, rhoncus et, dictum vel, tellus. Aliquam erat volutpat. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Aliquam arcu ante, sagittis a, posuere ultrices, adipiscing in, quam. Integer facilisis suscipit ante. Proin sit amet leo.<br /><br /> Morbi dui. Nunc faucibus dui ut sapien. Phasellus ac ligula faucibus felis placerat congue. Integer est arcu, vestibulum a, fringilla vel, laoreet quis, enim. Pellentesque facilisis. Duis nunc magna, ullamcorper in, volutpat interdum, volutpat ac, erat. Ut lacinia, nibh a fermentum scelerisque, nulla erat interdum est, vel eleifend sapien mauris malesuada dui. Phasellus ultricies orci nec lorem. In non erat tempor nisl dictum hendrerit. Quisque volutpat, nulla imperdiet pharetra scelerisque, tellus diam ullamcorper felis, vitae pretium justo lectus vitae turpis. Nam nec nunc vel ipsum imperdiet semper. Aenean mollis ullamcorper ipsum. Donec sollicitudin, arcu quis fermentum varius, eros felis feugiat nibh, at lacinia magna risus in lorem. In odio mi, commodo eu, consequat ac, pretium eu, purus. Pellentesque ac erat quis sapien ultricies pharetra. </div> <script type="text/javascript"> //<!-- afficher_cacher('texte'); //--> </script> </body> </html> afficher_cacher_div.css: Code: CSS .bouton { color:#0000ff; font-size:24px; cursor:pointer; } .bouton:hover { text-decoration:underline; } .texte { border:1px solid #333333; background:#eeeeee; padding:10px; color:#333333; } .texte:hover { border:1px solid #000000; background:#cccccc; color:#000000; } afficher_cacher_div.js: Code: JavaScript function afficher_cacher(id) { if(document.getElementById(id).style.visibility=="hidden") { document.getElementById(id).style.visibility="visible"; document.getElementById('bouton_'+id).innerHTML='Cacher le texte'; } else { document.getElementById(id).style.visibility="hidden"; document.getElementById('bouton_'+id).innerHTML='Afficher le texte'; } return true; } Essayer Vous avez sûrement remarqué que j'ai appelé la fonction afficher_cacher à la fin du texte c'est simplement pour que dès le chargement de la page, le texte soit caché. merci et j'espère que vous avez aimé ce script Scripts et tutoriaux similaires à celui ci: Changer l'opacité d'un div(alpha) compatibles avec tous les navigateurs Faire des onglet en (X)html/CSS Faire un input file stylé en Css (X)html et Javascript Recharger/Actualiser une page en javascript [Tutoriel]Faire clignoter un texte en (X)html / CSS Background scrollable avec overflow:auto; sous firefox (X)html/CSS Propriété position et z-index en css tutoriel (X)html/CSS Modifier le curseur en image ou curseurs proposés en CSS/(X)html Commentaires Ajouter un commentaire Pseudo: Message: Code anti-bot: (recharger) Vous n'êtes actuellement pas connecté, certaines de vos informations(tel que votre Adresse IP) seront enregistrées pour éviter du spam. Votre message ne doit pas contenir certains mots ou une adresse internet, sinon, il ne sera pas envoyé. Les commentaires Envoyé par Fafa007 le 27/04/2009 à 12:27:29 Bonjour, Merci de cette fonction, mais est-il possible de la faire fonctionner dans une page PHP? Une ligne de ce genre ne semble pas fonctionner chez moi : $s = "<span id='bouton' id='bouton_info' onclick='javascript:afficher_cacher('text');'>Informations</span><div id='text' class='text'>$rs[content]</div>"; Merci de vos précisions, Envoyé par Fafa007 le 27/04/2009 à 13:23:24 Ok, j'ai trouvé, il faut rajouter des '\' pour gérer les guillemets : $s = "<div class='btinfo' id='btinfo_info' onclick=\"javascript:afficher_cacher('info');\">Informations</div><div id='info' class='info'>$rs[content]</div>"; @+ (PS: le code anti-boot est très pénible à faire, ça ne marche jamais ou les lettres sont difficilement identifiables) Envoyé par Ad00500 le 24/07/2009 à 12:21:28 Ca ne marche pas, revois le codage. Envoyé par ybouane le 24/07/2009 à 23:47:42 Salut, Ad00500 peut être que tu a Javascript désactivé, sinon, explique mieux ton problème (et préférablement dans le forum). Merci :) Envoyé par Jkrz7 le 10/12/2009 à 23:22:58 Bonjour votre code est super, mais j'aimerai savoir s'il été possible que lorsque je masque, les autres informations qui ne sont pas masquées, remonte sur la zone qui masque, et inversement, si c'est demasquée, ca descende ??? Merci d'avance Envoyé par ybouane le 12/12/2009 à 05:00:39 Bonjour, @Jkrz7: utilise le code Javascript suivant, ça devrait fonctionner: function afficher_cacher(id) { if(document.getElementById(id).style.display=="none") { document.getElementById(id).style.display="block"; document.getElementById('bouton_'+id).innerHTML='Cacher le texte'; } else { document.getElementById(id).style.display="block"; document.getElementById('bouton_'+id).innerHTML='Afficher le texte'; } return true; } Merci, d'ailleurs, je crois que je doit le rendre comme étant le code "officiel" :) Envoyé par Jkrz7 le 05/02/2010 à 22:20:50 Merci, même avec un peu de retard, ton script ma bcp servi. Envoyé par Dragt le 30/07/2010 à 12:58:42 Bonjour, Le script proposé fonctionne bien. Ceci dit, on se rend compte que si on fait sélection > copier > coller, le texte caché est malgré tout copié. Y a-t-il moyen d'éviter cela? En effet, si on fait un copier/coller de ce que l'on voit, on n'a pas forcément envie que le texte caché soit également copié... Envoyé par madmax52 le 20/08/2010 à 12:52:24 y à beaucoup plus simple <p><div align="center"><a onClick="this.nextSibling.style.display=((this.nextSibling.style.display=='none')?'':'none');" href="javascript:;">cliques ici pour voir l'autre phrase</a><span style="display: none;"><p> Ici c'est un code d'image, un texte, un code de video ou autres trucs comme un lecteur de musique... </p></font></span></div></p> Envoyé par Woodson le 16/03/2011 à 10:41:11 Bonjour Peut-on cacher plusieurs div ? avec plusieurs boutons Envoyé par guillaume le 24/04/2011 à 19:04:32 es ce que sa fonctionne sous joomla ? Envoyé par karl le 06/06/2011 à 09:09:54 Slt le contenu caché de cette façon est il toujours visible par les robots des moteurs de recherche ? Envoyé par Creativeburo le 20/06/2011 à 19:54:23 Bonjour, Je déterre un super tuto mais est ce que quelqu'un pourrais m'aider à l'améliorer. A savoir caché le div qui vient d'être ouvert si l'on clique sur un autre div ... parce que chez moi sa s'ouvre l'un par dessus l'autre et sa reste a l'écran à moins de cliquer donc pas très intuitif ... Pour plus de précision j'ai une série de liens menants à des div cachés grace à ce tuto mais tous positionnés les uns par dessus les autres. Je voudrais donc qu'ils se cachent automatiquement lorsque l'on clique sur le lien d'un autre produit. Merci d'avance Cordialement Envoyé par endymionn le 05/11/2011 à 17:23:59 Super ce script fonctionne !Mais j'ai un seul problème : ce n'est pas du texte, mais une tchat box que je veux faire apparaître. Le code marche quand même. Sauf que après le lien "Afficher la tchatbox", il y a un grand vide qui correspond à la taille de la tchatbox. Comment enlevez l'espace ? Merci Envoyé par xChocolat le 26/12/2011 à 20:33:46 c nul car sur mon site sa marche pas Envoyé par Gus le 19/01/2012 à 17:51:19 Salut à tous, Bon vous allez tous probablement me pourrir quand je vous aurais expliquer mon pb, mais j'essaie quand même. UP! Voilà, j'y connais juste que dalle en Javascript. J'ai quelques notions d'html qui me servent dans mon boulot de tous les jours. Oui mais voilà, mon client veut pouvoir afficher/masquer du texte sur une page... Overblog (oui je sais, je sors). Mes questions: - Déjà est ce que c'est possible, compte tenu du fait que les plate forme genre overblog ne permettent que très peu de customisation? - Si ça l'est, comment dois-je procéder? Je milite pour un wordpress depuis un moment, sans succès, on me répond "oui mais il faut l'héberger" (WTF?) Envoyé par Gus le 19/01/2012 à 18:23:44 En fait, je commence à arriver à quelque chose... donc fausse alerte. merci à tous et désolé pour le dérangement. Envoyé par iqdcjskg le 24/01/2012 à 12:30:02 20 Envoyé par Pam' le 28/01/2012 à 10:31:43 Super script, merci. Mais mes pages sont en php, pourrait-on avoir le même script mais fonctionnel pour PHP svp ? Le texte s'affiche directement, il n'est pas du tout masqué et j'obtiens l'erreur suivante pour le moment : Forbidden You don't have permission to access /tests/onclick='javascript:afficher_cacher('texte');' on this server. Avant demain... ;-) (rendu d'un projet demain) Merci d'avance !

Afficher/Cacher un div(element) en javascript

ybouane

Afficher/Cacher un div(element) en javascript
Note : 3.2/5 (2 votes)
Derniéres modifications : 03/04/2009 à 23:13:24
Mots-Clés : afficher cacher visible visibility style css display none hidden bouton affiche cache lien div bloc elements js css texte

Bonjour,
Dans ce script, je vais vous montrer comment faire un bouton qui permet d'afficher/cacher du texte en javascript.
visibility est la fonction qui permet d'afficher et cacher des éléments (X)html en javascript.

Lors du clic sur le bouton, le contenu de celui-ci vas lui aussi être modifié grace à la fonction innerHTML.

Bon voici les codes:

afficher_cacher_div.html:

Code: (X)html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

    <head>

        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

        <title>Afficher / Cacher une boite div en javascript</title>

        <link rel="stylesheet" media="all" title="style de la page" href="afficher_cacher_div.css" />

        <script type="text/javascript" src="afficher_cacher_div.js"></script>

    </head>

    <body>

        <span class="bouton" id="bouton_texte" onclick="javascript:afficher_cacher('texte');">Afficher le texte</span>

        <div id="texte" class="texte">

            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas nisl. Phasellus quis nulla sit amet leo pretium tincidunt. Quisque eleifend augue quis urna. Curabitur rhoncus quam ac odio. In a nisi et purus fermentum aliquet. Donec sed leo aliquet lacus sollicitudin rhoncus. Duis ultricies euismod odio. Suspendisse potenti. Cras interdum, diam quis porta interdum, elit urna tincidunt ipsum, quis pharetra sem dui ac tortor. Cras lacus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ipsum. Aliquam volutpat turpis at ante. Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br /><br />

            Nullam in est vel dui dignissim pretium. Vestibulum at augue. Quisque pellentesque leo id mauris. Sed elit felis, posuere in, pharetra at, auctor vitae, massa. Nam faucibus ipsum eget libero. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer elementum. In hac habitasse platea dictumst. Nunc interdum massa nec mi. Donec luctus nunc ac odio. Nulla id metus vel augue placerat elementum. Duis et lectus ut libero porttitor dictum. Aliquam faucibus, magna pharetra bibendum suscipit, mi libero vehicula enim, ornare tristique odio est eget tellus. Maecenas arcu nisl, dictum sit amet, luctus sit amet, tincidunt tincidunt, mauris. Cras purus lacus, hendrerit et, rhoncus et, dictum vel, tellus. Aliquam erat volutpat. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Aliquam arcu ante, sagittis a, posuere ultrices, adipiscing in, quam. Integer facilisis suscipit ante. Proin sit amet leo.<br /><br />

            Morbi dui. Nunc faucibus dui ut sapien. Phasellus ac ligula faucibus felis placerat congue. Integer est arcu, vestibulum a, fringilla vel, laoreet quis, enim. Pellentesque facilisis. Duis nunc magna, ullamcorper in, volutpat interdum, volutpat ac, erat. Ut lacinia, nibh a fermentum scelerisque, nulla erat interdum est, vel eleifend sapien mauris malesuada dui. Phasellus ultricies orci nec lorem. In non erat tempor nisl dictum hendrerit. Quisque volutpat, nulla imperdiet pharetra scelerisque, tellus diam ullamcorper felis, vitae pretium justo lectus vitae turpis. Nam nec nunc vel ipsum imperdiet semper. Aenean mollis ullamcorper ipsum. Donec sollicitudin, arcu quis fermentum varius, eros felis feugiat nibh, at lacinia magna risus in lorem. In odio mi, commodo eu, consequat ac, pretium eu, purus. Pellentesque ac erat quis sapien ultricies pharetra. 

        </div>

        <script type="text/javascript">

        //<!--

                afficher_cacher('texte');

        //-->

        </script>

    </body>

</html>

afficher_cacher_div.css:

Code: CSS

.bouton

{

        color:#0000ff;

        font-size:24px;

        cursor:pointer;

}

.bouton:hover

{

        text-decoration:underline;

}

.texte

{

        border:1px solid #333333;

        background:#eeeeee;

        padding:10px;

        color:#333333;

}

.texte:hover

{

        border:1px solid #000000;

        background:#cccccc;

        color:#000000;

}

afficher_cacher_div.js:

Code: JavaScript

function afficher_cacher(id)

{

        if(document.getElementById(id).style.visibility=="hidden")

        {

                document.getElementById(id).style.visibility="visible";

                document.getElementById('bouton_'+id).innerHTML='Cacher le texte';

        }

        else

        {

                document.getElementById(id).style.visibility="hidden";

                document.getElementById('bouton_'+id).innerHTML='Afficher le texte';

        }

        return true;

}

Essayer

Vous avez sûrement remarqué que j'ai appelé la fonction afficher_cacher à la fin du texte c'est simplement pour que dès le chargement de la page, le texte soit caché.

merci et j'espère que vous avez aimé ce script

Scripts et tutoriaux similaires à celui ci:

Commentaires

Ajouter un commentaire

Les commentaires

Envoyé par Fafa007 le 27/04/2009 à 12:27:29

Bonjour,

Merci de cette fonction, mais est-il possible de la faire fonctionner dans une page PHP?
Une ligne de ce genre ne semble pas fonctionner chez moi :
$s = "<span id='bouton' id='bouton_info' onclick='javascript:afficher_cacher('text');'>Informations</span><div id='text' class='text'>$rs[content]</div>";

Merci de vos précisions,

Envoyé par Fafa007 le 27/04/2009 à 13:23:24

Ok, j'ai trouvé, il faut rajouter des '\' pour gérer les guillemets :
$s = "<div class='btinfo' id='btinfo_info' onclick=\"javascript:afficher_cacher('info');\">Informations</div><div id='info' class='info'>$rs[content]</div>";

@+

(PS: le code anti-boot est très pénible à faire, ça ne marche jamais ou les lettres sont difficilement identifiables)

Envoyé par Ad00500 le 24/07/2009 à 12:21:28

Ca ne marche pas, revois le codage.

Envoyé par ybouane le 24/07/2009 à 23:47:42

Salut,
Ad00500 peut être que tu a Javascript désactivé, sinon, explique mieux ton problème (et préférablement dans le forum).
Merci :)

Envoyé par Jkrz7 le 10/12/2009 à 23:22:58

Bonjour votre code est super, mais j'aimerai savoir s'il été possible que lorsque je masque, les autres informations qui ne sont pas masquées, remonte sur la zone qui masque, et inversement, si c'est demasquée, ca descende ???

Merci d'avance

Envoyé par ybouane le 12/12/2009 à 05:00:39

Bonjour,
@Jkrz7:
utilise le code Javascript suivant, ça devrait fonctionner:

function afficher_cacher(id)
{
if(document.getElementById(id).style.display=="none")
{
document.getElementById(id).style.display="block";
document.getElementById('bouton_'+id).innerHTML='Cacher le texte';
}
else
{
document.getElementById(id).style.display="block";
document.getElementById('bouton_'+id).innerHTML='Afficher le texte';
}
return true;
}

Merci, d'ailleurs, je crois que je doit le rendre comme étant le code "officiel" :)

Envoyé par Jkrz7 le 05/02/2010 à 22:20:50

Merci, même avec un peu de retard, ton script ma bcp servi.

Envoyé par Dragt le 30/07/2010 à 12:58:42

Bonjour,

Le script proposé fonctionne bien. Ceci dit, on se rend compte que si on fait sélection > copier > coller, le texte caché est malgré tout copié. Y a-t-il moyen d'éviter cela?
En effet, si on fait un copier/coller de ce que l'on voit, on n'a pas forcément envie que le texte caché soit également copié...

Envoyé par madmax52 le 20/08/2010 à 12:52:24

y à beaucoup plus simple

<p><div align="center"><a onClick="this.nextSibling.style.display=((this.nextSibling.style.display=='none')?'':'none');" href="javascript:;">cliques ici pour voir l'autre phrase</a><span style="display: none;"><p>

Ici c'est un code d'image, un texte, un code de video ou autres trucs comme un lecteur de musique...

</p></font></span></div></p>

Envoyé par Woodson le 16/03/2011 à 10:41:11

Bonjour
Peut-on cacher plusieurs div ? avec plusieurs boutons

Envoyé par guillaume le 24/04/2011 à 19:04:32

es ce que sa fonctionne sous joomla ?

Envoyé par karl le 06/06/2011 à 09:09:54

Slt le contenu caché de cette façon est il toujours visible par les robots des moteurs de recherche ?

Envoyé par Creativeburo le 20/06/2011 à 19:54:23

Bonjour,

Je déterre un super tuto mais est ce que quelqu'un pourrais m'aider à l'améliorer. A savoir caché le div qui vient d'être ouvert si l'on clique sur un autre div ... parce que chez moi sa s'ouvre l'un par dessus l'autre et sa reste a l'écran à moins de cliquer donc pas très intuitif ...

Pour plus de précision j'ai une série de liens menants à des div cachés grace à ce tuto mais tous positionnés les uns par dessus les autres. Je voudrais donc qu'ils se cachent automatiquement lorsque l'on clique sur le lien d'un autre produit.

Merci d'avance
Cordialement

Envoyé par endymionn le 05/11/2011 à 17:23:59

Super ce script fonctionne !Mais j'ai un seul problème : ce n'est pas du texte, mais une tchat box que je veux faire apparaître.
Le code marche quand même.
Sauf que après le lien "Afficher la tchatbox", il y a un grand vide qui correspond à la taille de la tchatbox.
Comment enlevez l'espace ?
Merci

Envoyé par xChocolat le 26/12/2011 à 20:33:46

c nul car sur mon site sa marche pas

Envoyé par Gus le 19/01/2012 à 17:51:19

Salut à tous,
Bon vous allez tous probablement me pourrir quand je vous aurais expliquer mon pb, mais j'essaie quand même. UP!
Voilà, j'y connais juste que dalle en Javascript. J'ai quelques notions d'html qui me servent dans mon boulot de tous les jours. Oui mais voilà, mon client veut pouvoir afficher/masquer du texte sur une page... Overblog (oui je sais, je sors).

Mes questions:
- Déjà est ce que c'est possible, compte tenu du fait que les plate forme genre overblog ne permettent que très peu de customisation?
- Si ça l'est, comment dois-je procéder?

Je milite pour un wordpress depuis un moment, sans succès, on me répond "oui mais il faut l'héberger" (WTF?)

Envoyé par Gus le 19/01/2012 à 18:23:44

En fait, je commence à arriver à quelque chose... donc fausse alerte.

merci à tous et désolé pour le dérangement.

Envoyé par iqdcjskg le 24/01/2012 à 12:30:02

Envoyé par Pam' le 28/01/2012 à 10:31:43

Super script, merci.
Mais mes pages sont en php, pourrait-on avoir le même script mais fonctionnel pour PHP svp ?
Le texte s'affiche directement, il n'est pas du tout masqué et j'obtiens l'erreur suivante pour le moment :
Forbidden

You don't have permission to access /tests/onclick='javascript:afficher_cacher('texte');' on this server.

Avant demain... ;-) (rendu d'un projet demain)

Merci d'avance !