JS: ouvrir/fermer des boîtes dans la page?

Fermé
macunaima - 23 sept. 2007 à 01:38
PhP Messages postés 1770 Date d'inscription lundi 11 décembre 2000 Statut Membre Dernière intervention 23 décembre 2009 - 17 juin 2009 à 00:16
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();
}

}

3 réponses

PhP Messages postés 1770 Date d'inscription lundi 11 décembre 2000 Statut Membre Dernière intervention 23 décembre 2009 606
23 sept. 2007 à 11:13
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 ...
C'est exactement ça! Grand merci.
Utilisateur anonyme
11 juin 2009 à 10:57
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
PhP Messages postés 1770 Date d'inscription lundi 11 décembre 2000 Statut Membre Dernière intervention 23 décembre 2009 606
17 juin 2009 à 00:16
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 ...
0