DEPLIER DU TEXTE

CHAMOTTE Messages postés 13 Date d'inscription Statut Membre Dernière intervention -
Melooo Messages postés 1405 Date d'inscription Statut Membre Dernière intervention - 11 mai 2011 à 12:22

Bonjour,

j'aimerais savoir comment déplier et replier du texte en langage html et css en cliquant sur un mot ou en passant dessus.

A cette adresse, la page concernée : http://www.lechameaurose.com/PARIS_a165.html?preview=1

j'aimerai qu'apparaissent seulement les noms des lieux en rose et que la description ne vienne que si on clique ou passe sur le nom.

merci d'avance

Afficher la suite

A voir également:

DEPLIER DU TEXTE
Texte de chanson gratuit pdf - Télécharger - Vie quotidienne
Transcription audio en texte word gratuit - Guide
Excel cellule couleur si condition texte - Guide
Texte barré whatsapp - Guide
Mettre un texte en majuscule - Guide

9 réponses

Réponse 1 / 9

Melooo Messages postés 1405 Date d'inscription Statut Membre Dernière intervention 84

Salut,
tu parles du menu déroulant ?

Réponse 2 / 9

CHAMOTTE Messages postés 13 Date d'inscription Statut Membre Dernière intervention

non je parle de la liste de lieux en dessous contenue dans les trois colonnes : il y a beaucoup trop de texte ce n'est pas joli et décourageant, c'est pourquoi je voudrais que l'on ne voit que le nom de lieux et la description n'apparaitrait que lorsqu'on clique sur le nom. Enfin un système qui cache tout le texte en noir

Réponse 3 / 9

Melooo Messages postés 1405 Date d'inscription Statut Membre Dernière intervention 84

Bhé euh tu viens de dire ce que tu devais faire, alors tu attends quoi de nous ?
Qu'est ce que tu n'arrives pas à faire ? suffit juste que tu rende l'entête de colonne cliquable et qu'elle mène vers une description plus complète.

Réponse 4 / 9

CHAMOTTE Messages postés 13 Date d'inscription Statut Membre Dernière intervention

oui ça je sais le faire sauf que je voeux que ce soit sur la même page je ne veux pas me diriger ailleurs à chaque fois que je clique sur un item, donc je voudrais que ça fasse un show/hide comme avec les petits + des dossiers et sous dossiers windows. qu'on reste sur la même page web

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question

Réponse 5 / 9

Melooo Messages postés 1405 Date d'inscription Statut Membre Dernière intervention 84

Show hide, tu as tout dis !
Jquery ! ;)
https://api.jquery.com/show/
https://api.jquery.com/hide/

Réponse 6 / 9

CHAMOTTE Messages postés 13 Date d'inscription Statut Membre Dernière intervention

hey, merci pour ce lien, j'ai réussis à m'approcher de mon but MAIS j'ai encore quelques petits soucis

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 re cacher le texte en recliquant sur le même bouton

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

Réponse 7 / 9

Melooo Messages postés 1405 Date d'inscription Statut Membre Dernière intervention 84

Re salut,
Bon normal que tout se déroule en même temps
car tu le fais sur l'élément button;)
Donc je te conseil de faire ca :

<div class="titre">Titre</div> <div class="texte"> mon texte </div> 
<div class="titre2">Titre 2</div> <div class="texte2"> mon texte 2 </div>

Et maintenant le jquery :

$(".titre").click(function () { 
$(".texte").show("slow"); 
});  
$(".titre2").click(function () { 
$(".texte2").show("slow"); 
});

A toi de voir pour l'optimiser si tu as beaucoup de colonne comme ca ;)
Pour recacher le bouton regarde du côté du hide()

Réponse 8 / 9

CHAMOTTE Messages postés 13 Date d'inscription Statut Membre Dernière intervention

ça marche pas ! je suis nulle je crois
<h2>LIFE STYLE / SORTIE</h2>
<hr>
<h3>Bar</h3>
<div class="titre"><span>LE CAFE CHERI(E)</span></div> <div class="texte"> - 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></div>

<script>
$(".titre").click(function () {
$(".texte").show("slow");
});
<script>
<br>
<div class="titre"><span>LE NOUVEAU CASINO</span></div> <div class="texte"> concerts / electro</div>
<script>
$(".titre").click(function () {
$(".texte").show("slow");
});
<script>
</script>

Réponse 9 / 9

Melooo Messages postés 1405 Date d'inscription Statut Membre Dernière intervention 84

Bon déjà je te conseil de placer ton code javascript en haut de ton code et pas en plein milieu comme ca : donc met tout tes balises <script> juste après le body.
Ensuite pourquoi mettre des span sans class ni id ?
et pour finir essayes :

$(document).ready(function() {
$(".titre").click(function () {
$(".texte").show("slow");
});

Discussions similaires

Formule Excel : "SI" une cellule contient un mot, alors ?

Excel formule : savoir si une cellule contient partie texte

[Excel] Recherche de Texte avec RechercheV

Votre réponse

Discussions similaires