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();
}
}
A voir également:
- JS: ouvrir/fermer des boîtes dans la page?
- Js arrondir - Forum Webmastering
- Please enable js and disable any ad blocker ✓ - Forum Services en ligne
- Js/packed.agent.n ✓ - Forum Virus
- Arrondir js ✓ - Forum Windows
- Isset js ✓ - Forum Javascript
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 ...
