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();
}

}

A voir également:

JS: ouvrir/fermer des boîtes dans la page?
Js/adware.agent.cr ✓ - Forum Virus
Exécuter un fichier js en ligne de commande - Forum Javascript
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 Photoshop
Please enable js and disable any ad blocker - Forum Mozilla Firefox
Pixlr - Forum Graphisme

3 réponses

Réponse 1 / 3

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 ...

Réponse 2 / 3

macunaima
23 sept. 2007 à 15:18

C'est exactement ça! Grand merci.

Réponse 3 / 3

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 ...

Discussions similaires

Javascript Arrondi à 2 chiffres après la virgule

code couleur associé a une image

Cheval de Troie JS/Kryptik.I

'JS/Agent.TS' Qu'est ce que c'est ?

Faire un echo dans un script JS

Discussions similaires

Newsletters