JS: ouvrir/fermer des boîtes dans la page?
macunaima
-
PhP Messages postés 1774 Statut Membre -
PhP Messages postés 1774 Statut Membre -
Bonjour. Je voudrais construire une page html avec des articles que l'on peut déplier ou replier; en somme, des boîtes minimisables qui s'ouvrent ou se referment lorsqu'on clique dessus. Je me tords la tête à chercher des scripts javascripts -que je comprends d'ailleurs mal-, mais rien ne fonctionne... La seule chose que j'ai trouvé, c'est ce qui suit - issu du site de Rue89 (www.rue89.com) où les commentaires aux articles s'ouvrent et se referment exactement de cette manière. C'est du javascript mais ça ne ressemble pas à du javascript (qu'est-ce que le "$" vient faire ?? et syntaxe de fonction inhabituelle ??). Quelqu'un peut-il m'aider?
toggleComment = function(el) {
if($(el).siblings('.content').css('display') != 'none') {
$(el).removeClass('commentOpened').addClass('commentClosed').children().html('Ouvrir Le Commentaire');
$(el).siblings().not('.title').hide();
}
else {
$(el).removeClass('commentClosed').addClass('commentOpened').children().html('Fermer Le Commentaire');
$(el).siblings().not('.title').show();
}
}
toggleComment = function(el) {
if($(el).siblings('.content').css('display') != 'none') {
$(el).removeClass('commentOpened').addClass('commentClosed').children().html('Ouvrir Le Commentaire');
$(el).siblings().not('.title').hide();
}
else {
$(el).removeClass('commentClosed').addClass('commentOpened').children().html('Fermer Le Commentaire');
$(el).siblings().not('.title').show();
}
}
Configuration: Mac OS X Firefox 2.0
3 réponses
-
Bjr
Un petit ex qui je pense fait ce que tu veux
<html> <head> <style> body { font-size : 10pt; font-family : arial; } .titre { font-size : 12pt; font-weight : bold; margin-top : 20px; } .detail { color : #0000C0; background-color : #F0F0F0; font-size : 10pt; font-weight : normal; display : none; margin-top : 10px; } </style> <script type="text/javascript"> <!-- function toggle(eltId) { var elt = document.getElementById(eltId); elt.style.display = (elt.style.display == "block") ? "none" : "block"; } // --> </script> </head> <body> <div class="titre"><a href="javascript:void(0)" onclick="toggle('detail1')">Titre 1</a> <div id="detail1" class="detail"> Ceci est le détail du titre 1.<br/> Vous pouvez me masquer en cliquant sur [Titre 1] </div> </div> <div class="titre"><a href="javascript:void(0)" onclick="toggle('detail2')">Titre 2</a> <div id="detail2" class="detail"> Ceci est le détail du titre 2.<br/> Il contient plus de lignes.<br/> Il contient plus de lignes.<br/> Il contient plus de lignes.<br/> Il contient plus de lignes.<br/> Vous pouvez me masquer en cliquant sur [Titre 2] </div> </div> </body> </html>--
PhP
Il y a 10 types de personnes dans le monde : ceux qui comprennent le binaire et les autres ... -
-
Bonjour,
ce code m'intéresse, j'ai une petite question.
si la div 1 est ouverte comment faire pour que quand je clic sur la div 2 la 1 se ferme et la 2 s'ouvre ?
Merci-
Bsr
Un peu comme ceci mais faudrait peaufiner ;-)
<html> <head> <style> body { font-size : 10pt; font-family : arial; } .titre { font-size : 12pt; font-weight : bold; margin-top : 20px; } .detail { color : #0000C0; background-color : #F0F0F0; font-size : 10pt; font-weight : normal; display : none; margin-top : 10px; } </style> <script type="text/javascript"> <!-- var currentDiv; function toggle(eltId) { var elt = document.getElementById(eltId); if (currentDiv && (currentDiv != elt)) { currentDiv.style.display = "none"; } elt.style.display = "block"; currentDiv = elt; } // --> </script> </head> <body> <div class="titre"><a href="javascript:void(0)" onclick="toggle('detail1')">Titre 1</a> <div id="detail1" class="detail"> Ceci est le détail du titre 1.<br/> Vous pouvez me masquer en cliquant sur [Titre 1] </div> </div> <div class="titre"><a href="javascript:void(0)" onclick="toggle('detail2')">Titre 2</a> <div id="detail2" class="detail"> Ceci est le détail du titre 2.<br/> Il contient plus de lignes.<br/> Il contient plus de lignes.<br/> Il contient plus de lignes.<br/> Il contient plus de lignes.<br/> Vous pouvez me masquer en cliquant sur [Titre 2] </div> </div> </body> </html>--
PhP
Il y a 10 types de personnes dans le monde : ceux qui comprennent le binaire et les autres ...
-
