Afficher/masquer un div à la fois avec javascript [Résolu/Fermé]

Signaler
Messages postés
10
Date d'inscription
mardi 3 septembre 2013
Statut
Membre
Dernière intervention
18 septembre 2013
-
Messages postés
10
Date d'inscription
mardi 3 septembre 2013
Statut
Membre
Dernière intervention
18 septembre 2013
-
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 !






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

<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.
Messages postés
10
Date d'inscription
mardi 3 septembre 2013
Statut
Membre
Dernière intervention
18 septembre 2013

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.
j'ai oublié un ; sur le padding

padding: 4px ;

@hiflo : Insérer le CSS dans le HTML c'est le mal, surtout dans ce contexte ou il a besoin d'une structure normalisé.
Messages postés
41
Date d'inscription
vendredi 18 juillet 2008
Statut
Membre
Dernière intervention
5 septembre 2013
33
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
$('.contenu').hide(); 
, par ce que là, tu demande de fermer puis ouvrir le div au clic sur titre
Non, je lui demande de fermer tout les contenu et de rouvrir celui sur lequel il a cliqué, ce qui est sa demande.
Messages postés
41
Date d'inscription
vendredi 18 juillet 2008
Statut
Membre
Dernière intervention
5 septembre 2013
33
C'est plus simple de les cacher tous en css dés le début vu qu'il ne veut que ne soit afficher que le plan.
Pour être plus rapide, il y a l'option d'utiliser le plugin accordéon de jquery ui ( https://jqueryui.com/accordion/ )
Non, lis son premier message

"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,"

Pour cela il faut bien fermer les contenu
Messages postés
10
Date d'inscription
mardi 3 septembre 2013
Statut
Membre
Dernière intervention
18 septembre 2013

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...)
Messages postés
41
Date d'inscription
vendredi 18 juillet 2008
Statut
Membre
Dernière intervention
5 septembre 2013
33
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>
Messages postés
41
Date d'inscription
vendredi 18 juillet 2008
Statut
Membre
Dernière intervention
5 septembre 2013
33
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
Messages postés
10
Date d'inscription
mardi 3 septembre 2013
Statut
Membre
Dernière intervention
18 septembre 2013

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
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.
Messages postés
10
Date d'inscription
mardi 3 septembre 2013
Statut
Membre
Dernière intervention
18 septembre 2013

PARFAIT ! Efficace (et pas cher !! ;))
Je testerai plus tard les div dans les div...
Je reviendrai si besoin :)
Je marque comme résolu
Messages postés
10
Date d'inscription
mardi 3 septembre 2013
Statut
Membre
Dernière intervention
18 septembre 2013

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 !
Messages postés
10
Date d'inscription
mardi 3 septembre 2013
Statut
Membre
Dernière intervention
18 septembre 2013

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>