Bienvenue sur Webmaster Hub

Inscrivez-vous maintenant pour avoir accès à toutes les fonctionnalités.

Une fois inscrit et identifié, vous pourrez contribuer à ce site en soumettant votre propre contenu ou en répondant au contenu existant. Vous pourrez éditer votre profil et communiquer avec les autres membres par messagerie privée.

Ce message sera supprimé une fois que vous serez identifié !

Sign in to follow this  
Followers 0
Chamotte

deplier / replier du texte html

Rate this topic

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

0

Share this post


Link to post
Share on other sites

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

@+

Edited by lorem_ipsum
0

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!


Register a new account

Sign in

Already have an account? Sign in here.


Sign In Now
Sign in to follow this  
Followers 0