11540 sujets

JavaScript, DOM et API Web HTML5

Un Slide Toogle en cache un autre

Bonjour tous le monde,

Voici le code et la question plus bas :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head profile="http://gmpg.org/xfn/11">
<title>Maquette 2</title>
<link rel="stylesheet" href="style.css" type="text/css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
</head>

<body>
<script>
jQuery(document).ready(function() {
	jQuery('#contenu1').hide();
   	jQuery('#clic1').click(function() {
   		jQuery('#contenu1').slideToggle(400);
   		return false;
   	});
});
jQuery(document).ready(function() {
	jQuery('#contenu2').hide();
   	jQuery('#clic2').click(function() {
   		jQuery('#contenu2').slideToggle(400);
   		return false;
   	});
});
</script>
<div id="warpper">
<div id="home">
	<ul id="menu">
		<li><a href="#" id="clic1">lien1</a></li>
		<li><a href="#" id="clic2">lien2</a></li>
	</ul>
</div>
</div>
<div id="contenu">
<div id="contenu1" >
<div id="article1" >
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>
</div>
<div id="contenu2" >
<div id="article2" >
Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
</div>
</div>
</div>
</body>


Donc le truc que je veux c'est que lorsque je clic sur un des lien le contenu de la div en question s'affiche (sa marche) mais que lorsque je clique sur le deuxième lien alors le premier contenu se ferme et vice versa. Si quelqu'un a compris ma demande tarabiscoté merci de me faire parvenir vos idées.

Bonne journée a tous.
JB
Modifié par thej8 (21 Jul 2012 - 13:19)
Autre petite question, j'ai essayé d'allier le Slide Toggle avec une ancre mais je crois que dans ce cas cela inhibe l'effet du Slide Toogle.
Voici le code qui va faire peur plus d'un :
<li><a href="#" id="clic1"><a href="#ancre">Mes tableaux</a></a></li>

En faite la question cacher et comment réaliser 2 issue a un seul lien en cherchant un peu il semblerait que le javascript soit de la partie cependant pas moyen de trouver le code.
Sujet clos
Aller à