Welcome to 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é !

Chamotte

deplier / replier du texte html

Noter ce sujet :

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

Partager ce message


Lien à poster
Partager sur d’autres sites

Posté (modifié)

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é par lorem_ipsum
0

Partager ce message


Lien à poster
Partager sur d’autres sites

Créer un compte ou se connecter pour commenter

Vous devez être membre afin de pouvoir déposer un commentaire

Créer un compte

Créez un compte sur notre communauté. C’est facile !


Créer un nouveau compte

Se connecter

Vous avez déjà un compte ? Connectez-vous ici.


Connectez-vous maintenant