Changer et rétablir un texte (onclick)

Natà
Javascript

Salut à tous, je suis en train d'essayer de bidouiller une fonction JS, certes basique, mais débute donc je bloque un peu. :/

Voilà j'ai créé cette petite fonction qui me permet de remplacer mon texte :

<SCRIPT language="Javascript">
                        <!--
                        function afficher_masquer() {
                                document.getElementById("test").innerHTML ="Masquer les options";
                        }
                        //-->
</SCRIPT>

Et mon html : 

<div id="test" onclick="afficher_masquer();">Afficher les options</div>

Quand je clique sur "Afficher les options" le texte se modifie bien en "Masquer".
Ce que je voudrais c'est que quand je clique à nouveau sur le lien, il redevienne "Afficher les options".

Est-ce que vous pourriez me donner un petit coup de main svp ? D'avance merci. :)

4 réponses

MrGuillou
Réponse acceptée

Utilise tu Jquery sur ton site ?

Sinon

function afficher_masquer() {  
    if (document.getElementById("userUser").innerHTML == "Masquer les options")
    {
        document.getElementById("test").innerHTML ="Afficher les options";  
    }
    else
    {
        document.getElementById("test").innerHTML ="Masquer les options";  
    }
)
Natà
Auteur

Salut jbou, oui j'ai une librairie jquery quelque part.

MrGuillou

avec jquery

$('#test').click(function(){

    if ($(this).hasClass("masquer")){
        $(this).empty().append("Afficher les options");
        $(this).removeClass("masquer");
    }
    else
    {
        $(this).empty().append("Masquer les options");
        $(this).addClass("masquer");
    }
    /* le if test si la class "masquer" est appliqué à #test, si oui il affiche "afficher les option" puis enlève la class "masquer" sinon il applique la class "masquer" et affiche l'autre text*/

});

au passage c'est juste une fois empty il y a un bug sur le forum qui le double :(
Attention un id doit être unique dans une page, donc si tu a plusieurs fois le même lien utilise une class

function hasClass : regarde si la class passé en paramètre est appliqué pour la cible
function addClass : ajoute une class à la cible
function removeClass : retire la class à la cible
function empty : vide la cible
function append : ajoute dans la cible le contenu passé en paramètre

Natà
Auteur

Parfait, j'ai choisi la première option, sans jquery, ça marche impeccable, merci beaucoup.