JS: ouvrir/fermer des boîtes dans la page?
macunaima
-
PhP Messages postés 1770 Date d'inscription Statut Membre Dernière intervention -
PhP Messages postés 1770 Date d'inscription Statut Membre Dernière intervention -
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();
}
}
A voir également:
- JS: ouvrir/fermer des boîtes dans la page?
- Copiez l'image dans un logiciel d'édition d'images ou un outil en ligne comme js paint ou pixlr e. remplissez les cases en suivant le code couleur. des cases supplémentaires vont se remplir automatiquement. que représente le dessin ? ✓ - Forum Windows
- Arrondi js ✓ - Forum Windows
- Remplir une case de tableau avec une couleur grise avec texture de pointillés ✓ - Forum Photoshop
- Reproduction d'un dessin - Forum Graphisme
- Js/kryptik.ad ✓ - Forum Virus
3 réponses
Bjr
Un petit ex qui je pense fait ce que tu veux
PhP
Il y a 10 types de personnes dans le monde : ceux qui comprennent le binaire et les autres ...
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
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 ;-)
PhP
Il y a 10 types de personnes dans le monde : ceux qui comprennent le binaire et les autres ...
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 ...
