Afficher/masquer un div à la fois avec javascript
Résolu
CelWeb
Messages postés
10
Date d'inscription
Statut
Membre
Dernière intervention
-
CelWeb Messages postés 10 Date d'inscription Statut Membre Dernière intervention -
CelWeb Messages postés 10 Date d'inscription Statut Membre Dernière intervention -
Bonjour,
Je me suis lancée dans l'élaboration de pages web pour y mettre mes cours (je renouvelle au passage mes remerciements à Sugel pour les premiers conseils).
Ce que je cherche à faire maintenant a déjà été demandé de multiples fois sur différents forums, mais à chaque fois que j'ai essayé les solutions proposées, soit cela n'a pas fonctionné, soit le résultat ne correspondait pas à mes attentes, donc je me permets de faire appel aux experts :)
Voilà l'objectif : faire apparaitre le contenu d'une partie d'un cours (une seule à la fois) en cliquant sur les titres du plan du cours, donc :
- A l'ouverture de la page, je souhaite qu'on ne voit que le plan. Ex :
Chapitre 1 - truc
I - titre du I
II - titre du II
III - titre du III
- Puis en cliquant sur l'un des 3 titres (I, II ou III), je souhaite que le contenu de la partie (texte + éventuellement image, tableau...) s'affiche. Par ex;, en ayant cliqué sur le I :
Chapitre 1 - truc
I - titre du I
texte du I texte du I texte du I texte du I
II - titre du II
III - titre du III
- En cliquant sur un autre titre, par exemple le II, alors que le contenu du I est toujours affiché, le contenu du I disparait et le contenu du II apparait :
Chapitre 1 - truc
I - titre du I
II - titre du II
texte du II texte du II texte du II texte du II
III - titre du III
- En cliquant sur un titre dont le contenu a déjà été ouvert, ce contenu est à nouveau masqué et on revient à la situation initiale (avec juste le plan).
En espérant avoir été assez claire, j'espère que vous pourrez m'aider, j'ai galéré pendant des heures sans parvenir à ce résultat. Pour l'instant, la solution la plus proche utilise JavaScript, avec des div et une fonction avec getElementById mais le problème c'est que plusieurs paragraphes peuvent être ouverts en même temps (un div donné ne se masque pas si on en démasque un autre)... J'ai aussi testé des codes avec toggle... sans succès...
Merci !
Je me suis lancée dans l'élaboration de pages web pour y mettre mes cours (je renouvelle au passage mes remerciements à Sugel pour les premiers conseils).
Ce que je cherche à faire maintenant a déjà été demandé de multiples fois sur différents forums, mais à chaque fois que j'ai essayé les solutions proposées, soit cela n'a pas fonctionné, soit le résultat ne correspondait pas à mes attentes, donc je me permets de faire appel aux experts :)
Voilà l'objectif : faire apparaitre le contenu d'une partie d'un cours (une seule à la fois) en cliquant sur les titres du plan du cours, donc :
- A l'ouverture de la page, je souhaite qu'on ne voit que le plan. Ex :
Chapitre 1 - truc
I - titre du I
II - titre du II
III - titre du III
- Puis en cliquant sur l'un des 3 titres (I, II ou III), je souhaite que le contenu de la partie (texte + éventuellement image, tableau...) s'affiche. Par ex;, en ayant cliqué sur le I :
Chapitre 1 - truc
I - titre du I
texte du I texte du I texte du I texte du I
II - titre du II
III - titre du III
- En cliquant sur un autre titre, par exemple le II, alors que le contenu du I est toujours affiché, le contenu du I disparait et le contenu du II apparait :
Chapitre 1 - truc
I - titre du I
II - titre du II
texte du II texte du II texte du II texte du II
III - titre du III
- En cliquant sur un titre dont le contenu a déjà été ouvert, ce contenu est à nouveau masqué et on revient à la situation initiale (avec juste le plan).
En espérant avoir été assez claire, j'espère que vous pourrez m'aider, j'ai galéré pendant des heures sans parvenir à ce résultat. Pour l'instant, la solution la plus proche utilise JavaScript, avec des div et une fonction avec getElementById mais le problème c'est que plusieurs paragraphes peuvent être ouverts en même temps (un div donné ne se masque pas si on en démasque un autre)... J'ai aussi testé des codes avec toggle... sans succès...
Merci !
A voir également:
- Section cachée qui s'ouvre au clic
- Masquer conversation whatsapp - Guide
- Comment masquer les amis sur facebook - Guide
- Comment appeler en masquer - Guide
- Comment masquer une photo dans la galerie - Guide
- Telecharger javascript - Télécharger - Langages
5 réponses
Insère jquery quelque part dans ta page
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
Ensuite
Et ton HTML :
<div class="titre" title="Chapitre 1">Chapitre 1</div>
<div class="contenu" title="Chapitre 1"> Ton texte </div>
Les title doivent etre identique dans le titre et le contenu. A saupoudrer de CSS si besoin.
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
Ensuite
<script>
$('.titre').click(function(){
$('.contenu').hide();
$('.contenu[title='+this.title+']').show();
});
</script>
Et ton HTML :
<div class="titre" title="Chapitre 1">Chapitre 1</div>
<div class="contenu" title="Chapitre 1"> Ton texte </div>
Les title doivent etre identique dans le titre et le contenu. A saupoudrer de CSS si besoin.
Bonjour,
Merci Quo de t'intéresser à mon problème.
Je viens de tester ta proposition, sans succès : tout s'affiche (titres + texte) et un clic sur un titre reste sans effet (n'apparaissent d'ailleurs pas comme des liens). J'ai probablement oublié quelque chose.
Quand tu dis de mettre jquery quelque part, c'est entre les balises <head> </head>?
Voici mon code, j'ai mis le minimum :
<html>
<head>
<meta content="text/html; charset=ISO-8859-1"
http-equiv="content-type">
<title>essai-reponseQuo</title>
<script
src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
$('.titre').click(function(){
$('.contenu').hide();
$('.contenu[title='+this.title+']').show();
});
</script>
</head>
<body>
<div class="titre" title="Chapitre 1">Chapitre 1</div>
<div class="contenu" title="Chapitre 1"> texte chap
1 </div>
<div class="titre" title="Chapitre 2">Chapitre 2</div>
<div class="contenu" title="Chapitre 2"> texte chap
2 </div>
<br>
</body>
</html>
Merci pour ton aide.
Merci Quo de t'intéresser à mon problème.
Je viens de tester ta proposition, sans succès : tout s'affiche (titres + texte) et un clic sur un titre reste sans effet (n'apparaissent d'ailleurs pas comme des liens). J'ai probablement oublié quelque chose.
Quand tu dis de mettre jquery quelque part, c'est entre les balises <head> </head>?
Voici mon code, j'ai mis le minimum :
<html>
<head>
<meta content="text/html; charset=ISO-8859-1"
http-equiv="content-type">
<title>essai-reponseQuo</title>
<script
src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
$('.titre').click(function(){
$('.contenu').hide();
$('.contenu[title='+this.title+']').show();
});
</script>
</head>
<body>
<div class="titre" title="Chapitre 1">Chapitre 1</div>
<div class="contenu" title="Chapitre 1"> texte chap
1 </div>
<div class="titre" title="Chapitre 2">Chapitre 2</div>
<div class="contenu" title="Chapitre 2"> texte chap
2 </div>
<br>
</body>
</html>
Merci pour ton aide.
Autant pour moi j'ai oublié le bout de code qui le fais marcher au bout moment et une quote
<script>
$(document).ready(function(){
$('.titre').click(function(){
$('.contenu').hide();
$('.contenu[title="'+this.title+'"]').show();
});
});
</script>
Et c'est normal qu'ils n'apparaissent pas comme des liens/qu'ils soient tous visible au début, ca te le fais en rajoutant ton CSS. Si tu veux un style de base :
.titre{
cursor:pointer;
font-size:16px;
padding: 4px
border-radius:5px;
border:1px solid grey;
}
.contenu{
padding:10px;
display:none;
}
<script>
$(document).ready(function(){
$('.titre').click(function(){
$('.contenu').hide();
$('.contenu[title="'+this.title+'"]').show();
});
});
</script>
Et c'est normal qu'ils n'apparaissent pas comme des liens/qu'ils soient tous visible au début, ca te le fais en rajoutant ton CSS. Si tu veux un style de base :
.titre{
cursor:pointer;
font-size:16px;
padding: 4px
border-radius:5px;
border:1px solid grey;
}
.contenu{
padding:10px;
display:none;
}
Merci beaucoup !
Ce qui correspond bien à mes attentes :
- seuls les titres s'affichent à l'ouverture de la page
- quand on ouvre un chapitre, l'autre se ferme
Mais ce qu'il manque par rapport à ce que j'avais exposé dans le premier message, c'est que l'on puisse "refermer" le contenu d'un chapitre en "recliquant" sur le titre (pour revenir à ce qu'on voit lors de l'ouverture de la page, cad uniquement les titres).
J'espère que le code proposé est facilement modifiable pour arriver à cela, car il me plait bien comme ça, il est court et simple.
Merci pour le temps accordé à mon pb ! (qui n'est que le premier d'ailleurs...)
Ce qui correspond bien à mes attentes :
- seuls les titres s'affichent à l'ouverture de la page
- quand on ouvre un chapitre, l'autre se ferme
Mais ce qu'il manque par rapport à ce que j'avais exposé dans le premier message, c'est que l'on puisse "refermer" le contenu d'un chapitre en "recliquant" sur le titre (pour revenir à ce qu'on voit lors de l'ouverture de la page, cad uniquement les titres).
J'espère que le code proposé est facilement modifiable pour arriver à cela, car il me plait bien comme ça, il est court et simple.
Merci pour le temps accordé à mon pb ! (qui n'est que le premier d'ailleurs...)
Ignore les posts de hilflo s'il te plait.
Ont peut très facilement le modifier
<script>
$(document).ready(function(){
$('.titre').click(function(){
if($('.contenu[title="'+this.title+'"]:visible').length){
$('.contenu').hide();
}else{
$('.contenu').hide();
$('.contenu[title="'+this.title+'"]').show();
}
});
});
</script>
Ont peut très facilement le modifier
<script>
$(document).ready(function(){
$('.titre').click(function(){
if($('.contenu[title="'+this.title+'"]:visible').length){
$('.contenu').hide();
}else{
$('.contenu').hide();
$('.contenu[title="'+this.title+'"]').show();
}
});
});
</script>
Super, merci énormément à Quo.
Je suis sûre que beaucoup d'autres seront entièrement satisfaits par ce code également !
Je ne sais pas si je dois clore ce topic car je risque d'avoir d'autres questions liées à cette fonction : je vais essayer d'avancer seule maintenant que j'ai un bon code de base, mais je risque d'avoir besoin de tuyaux (j'aurais peut-être besoin d'imbriquer des div (s'il y a des sous-parties dans mes parties que je ne veux pas ouvrir d'un bloc) et aussi de pouvoir faire en sorte qu'à l'aide d'un clic ailleurs (?) je puisse tout ouvrir (en vue d'imprimer l'ensemble), mais je vais chercher !)
Merci aussi à Hilflo de s'être intéressé à mon problème même si je n'ai finalement pas utilisé ses propositions.
Bonne journée
Je suis sûre que beaucoup d'autres seront entièrement satisfaits par ce code également !
Je ne sais pas si je dois clore ce topic car je risque d'avoir d'autres questions liées à cette fonction : je vais essayer d'avancer seule maintenant que j'ai un bon code de base, mais je risque d'avoir besoin de tuyaux (j'aurais peut-être besoin d'imbriquer des div (s'il y a des sous-parties dans mes parties que je ne veux pas ouvrir d'un bloc) et aussi de pouvoir faire en sorte qu'à l'aide d'un clic ailleurs (?) je puisse tout ouvrir (en vue d'imprimer l'ensemble), mais je vais chercher !)
Merci aussi à Hilflo de s'être intéressé à mon problème même si je n'ai finalement pas utilisé ses propositions.
Bonne journée
Le même code qui gère les sous-section, juste besoin de mettre les divs dans les divs, et un bouton pour tout ouvrir
<script>
$(document).ready(function(){
$('.titre').click(function(){
if($('.contenu[title="'+this.title+'"]:visible').length){
$(this).siblings('.contenu').hide();
}else{
$(this).siblings('.contenu').hide();
$(this).siblings('.contenu[title="'+this.title+'"]').show();
}
});
$('#ouvrir').click(function(){
$('.contenu').show();
});
});
</script>
<span id="ouvrir">Ouvrir</span>
Tu peux mettre le sujet en résolu.
<script>
$(document).ready(function(){
$('.titre').click(function(){
if($('.contenu[title="'+this.title+'"]:visible').length){
$(this).siblings('.contenu').hide();
}else{
$(this).siblings('.contenu').hide();
$(this).siblings('.contenu[title="'+this.title+'"]').show();
}
});
$('#ouvrir').click(function(){
$('.contenu').show();
});
});
</script>
<span id="ouvrir">Ouvrir</span>
Tu peux mettre le sujet en résolu.
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question
Bonjour,
Je poursuis ce poste car je viens de tester le code de Quo fourni plus haut, avec les div dans les div : ça marche bien sauf pour un détail.
Pour être claire, considérons des parties (avec leur titre) et des sous-parties (avec leur titre) et du contenu texte dans chaque sous-partie.
Ce qui marche nickel par rapport à mes souhaits initiaux :
- si on clique sur un titre de partie, les titres des sous-parties apparaissent,
- puis si on clique sur un titre de sous-partie, le contenu de cette sous-partie apparaît.
- si on clique sur un autre titre de partie, le contenu d'une autre partie déjà "ouverte" disparaît.
Jusque là, super !
Le défaut :
- le contenu d'une sous-partie ne se ferme pas à l'intérieur d'une partie quand on va dans une autre partie. Ex: je fais apparaitre une sous-partie de la partie I, puis je clique sur la partie II ; le contenu de la partie I disparait (normal) et le contenu de la partie II apparit (normal aussi), mais si je re-clqiue sur le titre de la partie I, la sous-partie qui avait été ouverte avant l'est toujours !
C'est un peu complexe, je ne sais pas si je suis claire.
Je ne comprends pas suffisemment la fonction pour trouver le remède.
D'autre part, j'ai voulu numéroter automatiquement mes titres de parties et sous-parties, en utilisant les compteurs. Sans utiliser la fonction founrie par quo pour ma demande de masquage/demasquage des contenus, ça marche bien, mais dès que j'utilise cette fonction, les compteurs ne marchent pas... (pas d'incrémentation).
Une solution ?
Merci à ceux qui se pencheront sur mes pb !
Je poursuis ce poste car je viens de tester le code de Quo fourni plus haut, avec les div dans les div : ça marche bien sauf pour un détail.
Pour être claire, considérons des parties (avec leur titre) et des sous-parties (avec leur titre) et du contenu texte dans chaque sous-partie.
Ce qui marche nickel par rapport à mes souhaits initiaux :
- si on clique sur un titre de partie, les titres des sous-parties apparaissent,
- puis si on clique sur un titre de sous-partie, le contenu de cette sous-partie apparaît.
- si on clique sur un autre titre de partie, le contenu d'une autre partie déjà "ouverte" disparaît.
Jusque là, super !
Le défaut :
- le contenu d'une sous-partie ne se ferme pas à l'intérieur d'une partie quand on va dans une autre partie. Ex: je fais apparaitre une sous-partie de la partie I, puis je clique sur la partie II ; le contenu de la partie I disparait (normal) et le contenu de la partie II apparit (normal aussi), mais si je re-clqiue sur le titre de la partie I, la sous-partie qui avait été ouverte avant l'est toujours !
C'est un peu complexe, je ne sais pas si je suis claire.
Je ne comprends pas suffisemment la fonction pour trouver le remède.
D'autre part, j'ai voulu numéroter automatiquement mes titres de parties et sous-parties, en utilisant les compteurs. Sans utiliser la fonction founrie par quo pour ma demande de masquage/demasquage des contenus, ça marche bien, mais dès que j'utilise cette fonction, les compteurs ne marchent pas... (pas d'incrémentation).
Une solution ?
Merci à ceux qui se pencheront sur mes pb !
Mon code si ça peut aider à voir mes pb :
le css (les titres de parties ont les balises TI et les titres de sous-parties ont les balises TA) :
* {
font : 30px Calibri, Arial;
color: rgb(255,255,255);
background-color: rgb(64,64,64);
}
body {
counter-reset: TI, TA;
padding-left: 100px;
padding-right: 100px;
}
TI:before {
content: counter(TI, upper-roman) ". ";
}
TI {
counter-increment: TI;
counter-reset: TA;
font-variant : small-caps;
color: rgb(60,136,144);
font-weight : bold;
font-size: 150%;
text-shadow:1px 1px 1px white;
}
TA:before {
content: counter(TA, upper-alpha) ". ";
}
TA {
counter-increment: TA;
color: rgb(183,123,180);
font-size: 120%;
text-shadow:1px 1px 1px white;
padding-left: 30px;
}
.titre{
cursor:pointer;
}
.contenu{
display:none;
}
le html avec numerotation MAIS sans utiliser la fonction de masquage/demasquage :
<body>
<ti>titre du I</ti><br>
<ta>titre du IA</ta><br>
texte du IA<br><br>
<ta> titre du IB</ta><br>
texte du IB<br><br>
<ti>titre du II</ti><br>
<ta>titre du IIA</ta><br>
texte du IIA<br><br>
<ta> titre du IIB</ta><br>
texte du IIB<br><br>
</body>
le html avec numerotation ET la fonction de masquage/demasquage (est-ce que j'ai mal mis les div dans les div ?) :
<body>
<div class="titre" title="I"><ti>titre du I</ti></div>
<div class="contenu" title="I">
<div class="titre" title="IA"><ta>titre du IA</ta><br></div>
<div class="contenu" title="IA">texte du IA<br><br></div>
<div class="titre" title="IB"><ta>titre du IB</ta><br></div>
<div class="contenu" title="IB">texte du IB<br><br></div></div>
<div class="titre" title="II"><ti>titre du II</ti></div>
<div class="contenu" title="II">
<div class="titre" title="IIA"><ta>titre du IIA</ta><br></div>
<div class="contenu" title="IIA">texte du IIA<br><br></div>
<div class="titre" title="IIB"><ta>titre du IIB</ta><br></div>
<div class="contenu" title="IIB">texte du IIB<br><br></div></div>
</body>
le css (les titres de parties ont les balises TI et les titres de sous-parties ont les balises TA) :
* {
font : 30px Calibri, Arial;
color: rgb(255,255,255);
background-color: rgb(64,64,64);
}
body {
counter-reset: TI, TA;
padding-left: 100px;
padding-right: 100px;
}
TI:before {
content: counter(TI, upper-roman) ". ";
}
TI {
counter-increment: TI;
counter-reset: TA;
font-variant : small-caps;
color: rgb(60,136,144);
font-weight : bold;
font-size: 150%;
text-shadow:1px 1px 1px white;
}
TA:before {
content: counter(TA, upper-alpha) ". ";
}
TA {
counter-increment: TA;
color: rgb(183,123,180);
font-size: 120%;
text-shadow:1px 1px 1px white;
padding-left: 30px;
}
.titre{
cursor:pointer;
}
.contenu{
display:none;
}
le html avec numerotation MAIS sans utiliser la fonction de masquage/demasquage :
<body>
<ti>titre du I</ti><br>
<ta>titre du IA</ta><br>
texte du IA<br><br>
<ta> titre du IB</ta><br>
texte du IB<br><br>
<ti>titre du II</ti><br>
<ta>titre du IIA</ta><br>
texte du IIA<br><br>
<ta> titre du IIB</ta><br>
texte du IIB<br><br>
</body>
le html avec numerotation ET la fonction de masquage/demasquage (est-ce que j'ai mal mis les div dans les div ?) :
<body>
<div class="titre" title="I"><ti>titre du I</ti></div>
<div class="contenu" title="I">
<div class="titre" title="IA"><ta>titre du IA</ta><br></div>
<div class="contenu" title="IA">texte du IA<br><br></div>
<div class="titre" title="IB"><ta>titre du IB</ta><br></div>
<div class="contenu" title="IB">texte du IB<br><br></div></div>
<div class="titre" title="II"><ti>titre du II</ti></div>
<div class="contenu" title="II">
<div class="titre" title="IIA"><ta>titre du IIA</ta><br></div>
<div class="contenu" title="IIA">texte du IIA<br><br></div>
<div class="titre" title="IIB"><ta>titre du IIB</ta><br></div>
<div class="contenu" title="IIB">texte du IIB<br><br></div></div>
</body>