deplier / replier du texte html

Chamotte · 10 Mai 2011

BONJOUR je suis très novice en langage html, je recherche comment utiliser la fonction showhide sur cette liste de lieux (http://www.lechameaurose.com/PARIS_a165.html)

les description devrait etre "pliées" sous le nom du lieu et se déployer lorsque l'on clique dessus

SAUF que LORSQUE avec mon test (http://www.lechameaurose.com/test_a167.html?preview=1) je rencontre des problème

1/ le bouton modifie ma police (c'est pas très très important mais bon s'il y a une solution ...)

2/ quand je clique sur un bouton tout se déroule (tous les autres boutons) au lieu de ne dérouler que la description correspondante

3 / j'aimerai pouvoir replier le texte en recliquant sur le nom du lieu

si ça peut être utile mon code ressemble à ça :

<!DOCTYPE HTML PUbLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>PARISCITY</title>
<style type="text/css" >
#conteneur {
position: relative;
margin: 0 auto;
width: 1090px;
}
.colonne {
float : right;
width : 230px;
margin : 10px;
background-color : #fff;
font-family: "Century Gothic";
font-size: 12px;
}
.colonne h2{
margin : .5em;
text-align: center;
font-weight: bold;
font-size: 16px;
}

.colonne h3{
margin : .5em;
text-align: center;
font-weight: bold;
font-size: 12px;
}

.colonne span{
margin-top : .5em;
text-align: center;
font-weight: bold;
color : #E52163;
}

.tete {
CLEAR : left;
width : 300px;
text-align: left;
font-family: "Century Gothic";
font-size: 12px;
margin-top: 25px;
margin-right: 10px;
margin-bottom: 10px;
margin-left: 10px;
}

.tete h1 {
font-weight: bold;
margin-bottom: 4em;
text-align: center;
}

.tete p {
text-align: justify;
}

#VILLE {
font-size: 36px;
color: #000;
font-family: "Century Gothic";
}

#CITY {
font-size: 36px;
color: #E52163;
font-weight: lighter;
}

</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<div id="conteneur">
<div class="colonne">
<h2>CULTURE / EVENEMENTS</h2>
<hr>
<h3>Musées</h3>

</div>

<div class="colonne">
<h2>MANGER / DORMIR / FLANER</h2>
<hr>
<h3>Restaurants</h3>
<p><span>LITTLE ITALY</span> - Restaurant de pâtes. Testez les pâtes au potiron. Et attendez une table dehors.</p>

</div>

<div class="colonne">
<h2>LIFE STYLE / SORTIE</h2>
<hr>
<h3>Bar</h3>
<button><span>LE CAFE CHERI(E)</span></button> <p style="display: none">- 8h à 2h du matin tous les jours. Entrée gratuite, programmation musicale de 22h à 2h les jeudi, vendredi et samedi. Electro, rock, funk, hip hop, rare grooves, indie dance, jazz, oldies but goodies, ghetto musics and more. Expo-résidence d'artistes au premier étage .
<a href="http://cafecherie.blogspot.com//"target="_blank"><i>le site</i></a></p>
<script>
$("button").click(function () {
$("p").show("slow");
});
</script>
<br>
<button><span>LE ROSA BONHEUR</span></button> <p style="display: none"> - Alors là attention grand dilemme de l'été : rester allongé dans l'herbe des buttes Chaumont ou ne pas se laisser avoir et faire l'incroyable prouesse d'arriver avant le drame (18h) dans ce lieu on ne peut mieux situé (dans le parc) qui propose vin et food. Après faut faire des coudes et avoir l'oeil pour s'assoir. Le plus : les grandes tables communes qui forcent les rencontres.</p>
<script>
$("button").click(function () {
$("p").show("slow");
});
</script>

</div>

<div class="tete">
<h1><span id="VILLE">PARIS</span><span id="CITY">CITY </span></h1>
<img src="docs/paris.jpg" alt=""width="300"height="199" align="top" /><br>
</div>
</div>
</body>
</html>

merci sincèrement

lorem_ipsum · 12 Mai 2011

Salut,

Tu devrais utiliser toggle de jquery, c'est plus simple.

Tu peux supprimer tous les ajout js que tu as écris, et juste après l'insertion de ton lastest.js, rajoutes c'est lignes :


<script type="text/javascript">
	$(document).ready(function(){
		$('button').click(function() {
		  $(this).next().toggle('fast', function() {
			// Animation complete.
			alert('huhhu ça marche');
		  });
		});
	});
</script>

Tu devrais utiliser des class pour tes boutons sinon tous tes boutons du site utiliseront cette fonction et afficheront ou non l'élément suivant.

Exemple ton bouton avec la class "ma_class_toto":


<script type="text/javascript">
	$(document).ready(function(){
		$('.ma_class_toto').click(function() {
		  $(this).next().toggle('fast', function() {
			// Animation complete.
			alert('huhhu ça marche');
		  });
		});
	});
</script>

ça reste du bricolage, mais c'est adapter à ta demande...

Bon code

@+

Modifié 12 Mai 2011 par lorem_ipsum

Connexion

deplier / replier du texte html

Sujets conseillés

Chamotte

lorem_ipsum

Veuillez vous connecter pour commenter

Parcourir

Activité