Afficher/masquer un div à la fois avec javascript
Résolu/Fermé
CelWeb
Messages postés
10
Date d'inscription
mardi 3 septembre 2013
Statut
Membre
Dernière intervention
18 septembre 2013
-
4 sept. 2013 à 02:35
CelWeb Messages postés 10 Date d'inscription mardi 3 septembre 2013 Statut Membre Dernière intervention 18 septembre 2013 - 18 sept. 2013 à 18:11
CelWeb Messages postés 10 Date d'inscription mardi 3 septembre 2013 Statut Membre Dernière intervention 18 septembre 2013 - 18 sept. 2013 à 18:11
A voir également:
- Section cachée qui s'ouvre au clic
- Masquer conversation whatsapp - Guide
- Telecharger javascript - Télécharger - Langages
- Afficher mot de passe wifi android - Guide
- Javascript arrondir à 2 décimales ✓ - Forum Javascript
- Signe fois clavier iphone ✓ - Forum Word
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.
CelWeb
Messages postés
10
Date d'inscription
mardi 3 septembre 2013
Statut
Membre
Dernière intervention
18 septembre 2013
4 sept. 2013 à 10:19
4 sept. 2013 à 10:19
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.
hilflo
Messages postés
41
Date d'inscription
vendredi 18 juillet 2008
Statut
Membre
Dernière intervention
5 septembre 2013
59
4 sept. 2013 à 10:22
4 sept. 2013 à 10:22
ajoute
style="display:none"au
div class="contenu"
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;
}
hilflo
Messages postés
41
Date d'inscription
vendredi 18 juillet 2008
Statut
Membre
Dernière intervention
5 septembre 2013
59
4 sept. 2013 à 10:41
4 sept. 2013 à 10:41
Oui , moi je te disais de le mettre là pour te montrer qu'il manquer un display:none.
Par contre, dans le js, tu peux retirer
Par contre, dans le js, tu peux retirer
$('.contenu').hide(); , par ce que là, tu demande de fermer puis ouvrir le div au clic sur titre
CelWeb
Messages postés
10
Date d'inscription
mardi 3 septembre 2013
Statut
Membre
Dernière intervention
18 septembre 2013
4 sept. 2013 à 10:51
4 sept. 2013 à 10:51
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...)
hilflo
Messages postés
41
Date d'inscription
vendredi 18 juillet 2008
Statut
Membre
Dernière intervention
5 septembre 2013
59
4 sept. 2013 à 10:55
4 sept. 2013 à 10:55
l'accordeon de jquery ui, ferme et referme à volonté, il est étudié pour cela
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>
hilflo
Messages postés
41
Date d'inscription
vendredi 18 juillet 2008
Statut
Membre
Dernière intervention
5 septembre 2013
59
4 sept. 2013 à 11:53
4 sept. 2013 à 11:53
Pourquoi ignorer mes posts, ce n'est peut être pas ta solution mais elle n'est pas pour autant mauvaise.
Tu n'a pas la science infuse et dans le développement web, plusieurs solutions sont possible pour le même résultat
Tu n'a pas la science infuse et dans le développement web, plusieurs solutions sont possible pour le même résultat
CelWeb
Messages postés
10
Date d'inscription
mardi 3 septembre 2013
Statut
Membre
Dernière intervention
18 septembre 2013
Modifié par CelWeb le 4/09/2013 à 11:27
Modifié par CelWeb le 4/09/2013 à 11:27
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.
CelWeb
Messages postés
10
Date d'inscription
mardi 3 septembre 2013
Statut
Membre
Dernière intervention
18 septembre 2013
4 sept. 2013 à 12:47
4 sept. 2013 à 12:47
PARFAIT ! Efficace (et pas cher !! ;))
Je testerai plus tard les div dans les div...
Je reviendrai si besoin :)
Je marque comme résolu
Je testerai plus tard les div dans les div...
Je reviendrai si besoin :)
Je marque comme résolu
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question
CelWeb
Messages postés
10
Date d'inscription
mardi 3 septembre 2013
Statut
Membre
Dernière intervention
18 septembre 2013
Modifié par CelWeb le 18/09/2013 à 18:11
Modifié par CelWeb le 18/09/2013 à 18:11
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 !
CelWeb
Messages postés
10
Date d'inscription
mardi 3 septembre 2013
Statut
Membre
Dernière intervention
18 septembre 2013
18 sept. 2013 à 18:11
18 sept. 2013 à 18:11
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>
