Re-click
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
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.
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/
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.
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();
}
})
});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
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.
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...
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;
}
})
});Merci de vos réponses rapides et précises :)
Iluzzion, ta solution est la bonne.
Merci aussi à paul9, tu m'a apris des choses ! :)