Re-click

Par Quentin8, il y a 14 ans

Javascript

Bonjour,

Je voudrais faire une fonction pour que jQuery détecte quand je click une deuxième fois sur un élément.
Je m'explique,
Je voudrais que quand je click sur un "Element 1", un "Element 2" apparaisse et que quand je re-click sur cet "Element 1", l'"Element 2" disparaisse.

Je n'ai aucune idée de comment faire cette fonction, quelqu'un pourrais m'aider ?

Merci d'avance
Bonne journée

Quentin

11 réponses

MrGuillou, il y a 14 ans

A tester

html

<div id="madiv1"></div>
<div id="madiv2"></div>

javascript 

jQuery(function($){
        $('#madiv1').click(function(){
         if ($('#madiv2').css('display') == 'none')
        {
                            $('#madiv2').hide();
        }
        else
        {
                $('#madiv2').hide();
        }
    );
);

ou tu a aussi la fonction toggle http://api.jquery.com/toggle/

Quentin8, il y a 14 ans

Merci de ta réponse.
Je n'arrive toujours pas à faire ce que je veux avec ton aide. Je suis débutent lol.

Si tu veux quelque chose de plus concret, voici le site que j'ai déjà développé : http://localhost:8888/Web%20Shaker/
Donc quand je click sur un onglet son contenu apparait bien comme je veux. Quand je clic sur un autre onglet le premier ce ferme bien et l'autre s'ouvre. Maintenant ce que je voudrais c'est que quand je clic sur un onglet déjà ouvert il se referme.
(Exemple : L'onglet "Accueil" est ouvert, si je re-click sur le mot "Accueil", l'onglet "Accueil" se referme.

Merci d'avance.

PaulB319, il y a 14 ans

Il faudrait utiliser une variable de statut pour savoir s'il faut afficher ou masquer #element2. Par exemple :

jQuery(function($){

    var status = null;
    $('#element1').click(function(){
        if(status == null){         
            status = true;
            $('#element2').show();
        }elseif(status == true){
            $('#element2').hide();
        }
    })
});
Quentin8, il y a 14 ans

J'ai essayer ton code mais je n'arrive pas à le faire marcher...

HTML

<div id="onglets">

        <div id="element1">Onglet</div>
        <div id="element2">Du texte</div>

    </div>

JAVASCRIPT 

jQuery(function($){

    var status = null;
    $("#element1").click(function(){
        if(status == null){         
            status = true;
            $("#element2").show();
        }elseif(status == true){
            $("#element2").hide();
        }

    })

});

Si tu vois une erreur n'hésite pas à me prévenir.

Merci, Quentin

PaulB319, il y a 14 ans

Honte à moi, j'ai oublié un petit truc !

jQuery(function($){

    var status = null;
    $("#element1").click(function(){
        if(status == null){         
            status = true;
            $("#element2").show();
        }elseif(status == true){
            $("#element2").hide();
            status = null;
        }

    })

});

J'avais oublié de mettre status = null après avoir caché l'élément2.

Quentin8, il y a 14 ans

J'ai trop la honte là lol.
Je suis sur que ton code marche et que c'est qu'une petite erreur mais je tourne en rond depuis tous à l'heure.
Tu ne verrais pas mon erreur ?

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang="fr" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Web Shaker</title>
    <link href="style.css" rel="stylesheet" type="text/css" media="screen" />
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <script type="text/javascript" src="jquery.js"></script>
    <script type="text/javascript" src="jquery-ui.js"></script>
    <script type="text/javascript" src="test.js"></script>
</head>
<body>

        <div id="element1">Onglet</div>
        <div id="element2">Du texte</div>

</body>
</html>

JAVASCRIPT 

jQuery(function($){

    var status = null;
    $("#element1").click(function(){
        if(status == null){         
            status = true;
            $("#element2").show();
        }elseif(status == true){
            $("#element2").hide();
            status = null;
        }

    })

});

Encore désolé et merci de ton aide...

PaulB319, il y a 14 ans

Disposes-tu de chrome ? Si oui regarde avec la console si tu as une erreur.

Quentin8, il y a 14 ans

Il me dit qu'il y à une erreur à la ligne 8 du javascript.

PaulB319, il y a 14 ans

Essais avec un espace entre else et if :

jQuery(function($){       
    var status = null;
    $("#element1").click(function(){
        if(status == null){    
            status = true;
            $("#element2").show();
        }else if(status == true){
            $("#element2").hide();
            status = null;
       }
    })
});
iluzzion, il y a 14 ans

Salut, j'ai peut être une idée pour ton problème.

En Js tu crée une variable que t'initialise a 0, quand tu clic sur element1 tu l'incrémente.
Et quand t'affiche ton elemen2 tu l'incrémente de nouveau.

Il te reste plus ensuite qu'a tester la valeur de ta variable, si elle est égal a 2 lors d'un clic tu cache element2.

Quentin8, il y a 14 ans

Merci de vos réponses rapides et précises :)

Iluzzion, ta solution est la bonne.
Merci aussi à paul9, tu m'a apris des choses ! :)