High-Tech Santé Médecine Droit-Finances

Grippe A

Que dois-je faire ?

Rechercher : dans
Par :

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

Dernière réponse le 17 jun 2009 à 00:16:09 macunaima, le 23 sep 2007 à 01:38:10 
 Signaler ce message aux modérateurs

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

}

Configuration: Mac OS X
Firefox 2.0

Posez votre question Répondre

1

PhP, le 23 sep 2007 à 11:13:56
  • +2

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épondre à PhP

2

macunaima, le 23 sep 2007 à 15:18:02

C'est exactement ça! Grand merci.

   
Répondre à macunaima

3

christobale, le 11 jun 2009 à 10:57:14

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

   
Répondre à christobale

4

 PhP, le 17 jun 2009 à 00:16:09

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

   
Répondre à PhP
Posez votre question Répondre
Ils ont besoin de votre aide
Collection CommentÇaMarche.net