18041 sujets

Questions générales et questions de débutants

Afficher et masqué le contenus d'un div , en cliquant sur un lien.

bonjour a tous , je suis entrain de travailler sur mon premier , je voudrais faire , un petit communauté scientifique.

sur le site je veut y mettre de tutoriels, des articles, des astuces informatiques, ...

mais voilà mon problème , je voudrai que quand je clique sur un lien on affiche du texte et quand je clique à nouveau le texte est masqué.

autrement fair ceci

1.définition

blablabla.

quand je clique sur définition on affiche le blablabla.


merci d'avance pour vos solutions.
Tu t'appelle Greg-Lumiere, bien choisi ton pseudo tu apporte la lumiére en attendant j'ais pris ton exemple extra !!
Christele a écrit :
Tu t'appelle Greg-Lumiere, bien choisi ton pseudo tu apporte la lumiére en attendant j'ais pris ton exemple extra !!
Merci du compliment, le pen est le substrat de mes recherches sur le sujet.
Bonjour,
henock-Tshimuanga a écrit :
je voudrai que quand je clique sur un lien on affiche du texte et quand je clique à nouveau le texte est masqué.

Je me suis posé la même question il y a peu et j'ai trouvé la solution avec un tuto, simple à appliquer avec quelques lignes de javascript (je suis une brèle et j'ai réussi à le faire) :

Exemple 1, avec un bouton :
http://jsbin.com/kohibiciya/1/edit?html, css,js,output
(Il y a un bug d'affichage avec le lien. Copier la ligne et supprimer l'espace après la virgule.)
Il est possible simplement en CSS de changer le bouton par une image ou un texte.

Smiley biggthumpup Exemple 2, avec du texte (qui change si le paragraphe est affiché ou masqué) :
http://www.supportduweb.com/scripts_tutoriaux-code-source-33-afficher-cacher-un-div-element-en-javascript.html
Application :
http://www.supportduweb.com/ftp/ybouane/scripts_astuces/javascript/afficher_cacher_div/afficher_cacher_div.html


Le HTML :
    <body>
    <span class="bouton" id="bouton_texte" onclick="javascript:afficher_cacher('texte');">Afficher le texte</span>
    <div id="texte" class="texte">
    Ici je place mon texte et mes paragraphes…
    </div>
    <script type="text/javascript">
    //<!--
        afficher_cacher('texte');
    //-->
    </script>
    </body>

Les CSS :
.bouton
{…}
.bouton:hover
{…}
.texte /* paragraphe à masquer ou afficher au clic sur le bouton */
{…}
.texte:hover
{…}

Le javascript qui s'y applique :
 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;
}

Pour voir un exemple en live, je l'ai appliqué avec un bouton (sprite) sur la version actuelle de mon site perso (lien en dessous).
Smiley smile
Modifié par spongebrain (21 Jun 2016 - 20:42)
Sujet clos
Aller à