Afficher/masquer un contenu par un clic sur le titre

Bonjour à tous,

Après une longue et pénible recherche sur Google, je me tourne vers vos lumières pour réaliser un système d'ouverture/fermeture de blocs grâce à JavaScript.

Je cherche une solution qui se rapproche de celle-ci mais qui afficherait le contenu non pas au survol du titre mais bien au clic.

Je n'ai aucun à priori face à l'utilisation de javascript et j'ai par ailleurs cru comprendre que ce que je veux faire est impossible en xhtml/css pur.

Si vous connaissez une méthode propre qui rassemble les actions dans un fichier javascript externe, et qui se base de surcroît sur une syntaxe de liste non ordonnée, je suis preneur

Cordialement,
Benjamin


edit: le meilleur exemple en ligne que j'ai trouvé de ce que j'aimerais réaliser, c'est le bloc QBN Channels en haut à gauche de l'excellent portail Newstoday.
Modifié par Benjamin D.C. (15 Dec 2006 - 12:25)

Tu pensais à un truc du genre :

[b]XHTML[/b]
<div id="div1">
<h2>Titre</h2>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</div>

[b]JS[/b] lors du onload :

var d = document.getElementById('div1');
d.getElementsByTagName('ul')[0].style.display='none';
d.getElementsByTagName('h2')[0].onclick = function () {
var u = this.parentNode.getElementsByTagName('ul')[0];
u.style.display = (u.style.display=='none'? 'block':'none');
};

Edit de mpop : correction de la mise en forme du code
Modifié par mpop (11 Dec 2006 - 17:49)

En gros, tu vas avoir une structure comme ça :

<h2 id="titre05">Mon titre</h2>
<div id="contenu05">Bla bla tout le contenu à afficher/masquer</div>

Et tu devras avoir une fonction Javascript pour masquer la div lors du clic sur le h2, en lui passant un display: none (ou du moins l'équivalent en javascript).

Sans fonction externalisée, tu peux avoir un truc du genre :

<h2
	id="titre05"
	onclick="getElementById('contenu05').style.display.display='block'"
>Mon titre</h2>
<div id="contenu05">Bla bla tout le contenu à afficher/masquer</div>

Bon, sauf que là ça le cache, mais ça le rouvre pas quand on re-clique... (Pff, j'y connais rien en JS, pourquoi je réponds moi ? )

Mais c'est l'idée de base.

'lo Benjamin,
Il te suffit de faire une fonction qui va tester et jouer sur le style 'display' de tes blocs, et oui, en JavaScript.

function bShowHide(elemID)
  {
    var e = document.getElementById(elemID);
    var dStyle = ((e.style.display == '' || e.style.display == 'none') ? 'block':'none');
    e.style.display = dStyle;
  }

Cela est simple pour y faire appel, il te suffit de donner l'ID de l'élément que tu souhaites faire afficher / cacher lors de l'appel à la fonction :

… onclick="bShowHide('tonElementID');" …

Et oui, il faut que les éléments que tu veux faire afficher / cacher aient un attribut 'ID'.

Voilà
Modifié par Christopher (11 Dec 2006 - 17:53)

Salut,

Je rajouterais juste par rapport aux réponses de QuentinC et mpop qu'il vaut mieux créer un lien à insérer dans le <h2> pour que la solution soit accessible au clavier.

A ce que je comprend Benjamin D.C. tu es novice (comme moi quoi ^^)
Je pense que ce script n'a rien a envier aux autre au dessus mais il est peut-etre plus simple à comprendre?

<script type="text/javascript">
function show(indice)
{
	if (document.getElementById(indice).style.display=="none")		// Si la zone indiqué par indice est est invisible
		document.getElementById(indice).style.display="block";		// On l'affiche
	else									// Sinon (elle est donc visible)
		document.getElementById(indice).style.display="none";		//On la crend invisible
}
</script>
<!--
Le href="javascript:;" permet de laisse l'apparence d'un lien mais qui n'aura aucun effet sur la navigation
Le onclick="javascript:show('mon_contenu')" permet d'utiliser la fonction show() sur l'element mon_contenu
-->
<a href="javascript:;" onclick="javascript:show('mon_contenu')">Titre</a>
<div id="mon_contenu" style="display:none">
Contenu divers....
</div>

bonsoir à tous !

je me permets d'apporter un petit eclaircissement au code de 'christopher'

function bShowHide(elemID)

  {

    var e = document.getElementById(elemID);

    var dStyle = ((e.style.display == '' || e.style.display == 'none') ? 'block':'none');

    e.style.display = dStyle;

  }

qui rejoint ton code 'DarkHerumor' ( c'est black metal çà !? )

L'operateur conditionnel ?: est ce que l'on pourrait appeler un 'raccourci" de langage et utilise 3 opérandes ( ben c'est le nom !!).

premier opérande ? deuxième opérande : troisième opérande

et "remplace" dans ce cas l'utilisation de if/else.

Le premier opérande doit avoir une valeur booléenne (opérateur conditionnelle) :

(e.style.display == '' || e.style.display == 'none')

le second est retourné si la valeur du premier est true ... ici :
'block'
le troisième si la valeur du premier retourne ... false ... ici : 'none'

Si tu reprend ton code 'DarkHerumor' en appliquant cette 'opérateur ternaire' ( Wouahh la frime ) tu arrive sensiblement au code de 'christopher'

++

a écrit :

Je rajouterais juste par rapport aux réponses de QuentinC et mpop qu'il vaut mieux créer un lien à insérer dans le <h2> pour que la solution soit accessible
au clavier.

J'y ai pensé mais ça pose un autre problème. IL faudra forcément adpoter l'une des solutions suivantes, et aucune n'est totalement satisfaisante :

<a href="javascript:......">Lien</a>
<a href="#" onclick="......">Lien</a>
<a id="lien05">Lien</a> suivi d'une déclaration dans le .js externe

Dans tous les cas cela implique alors que le lien est inutilisable sans js.
Conséquence, il faut créer ce lien en js ! Ce qui devrait ressembler à :

[b]XHTML :[/b]

<h2 id="titre1">Titre</h2>

[b]JS [/b] dans le onload :
var e = document.getElementById('titre1');
var tn = e.firstChild;
var text = tn.nodeValue;
var lien = document.createElement('a');
lien.appendChild(document.createElementText(text));
e.replaceChild(tn, lien);
lien.href = "#";
lien.onclick = function () { ...... };

Remarque : Attention, je n'ai pas testé ce bout de code, je l'ai écrit en live.

QuentinC a écrit :
J'y ai pensé mais ça pose un autre problème.

Je ne vois pas en quoi c'est un problème, c'est même expliqué dans un tutoriel Alsacréations.

Salut,

Essaye ceci :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
					  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
	<head>
		<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
		<title>Exemple</title>
		<style type="text/css">/*<![CDATA[*/

.cache
{
	display: none;
}
.montre
{
	display: list-item;
}

		/*]]>*/</style><script type="text/javascript">//<![CDATA[

function Init(){


	var oUl = document.getElementById('fruits');
	oUl.className = 'cache';
	var oH2 = document.getElementsByTagName('h2')[0], oA = document.createElement('a'), oTxtA = document.createTextNode(oH2.firstChild.nodeValue);
	oA.href= '#';
	oA.appendChild(oTxtA);
	document.body.replaceChild(oA, oH2);
	oA.onclick = Display;
		
};
function Display()
{
	var oUl = document.getElementById('fruits');
	oUl.className = (oUl.className == 'cache') ? 'montre' : 'cache';
	return false;
}
window.onload = Init;

		//]]></script></head><body>

<h2>Fruits</h2>
<ul id="fruits">
	<li>Kiwi</li>
	<li>Poire</li>
	<li>Fraise</li>
	<li>Banane</li>
	<li>Mangue</li>
</ul>

</body></html>

Tu peux améliorer ce script en gérant les événements autrement (comme indiqué dans le tuto que t'as montré Eldebaran) afin de ne pas monopoliser l'événement sur le lien généré. Je ne l'ai pas mis ici pour ne pas trop complexifier le script.

Bonjour,

Je suis finalement tombé sur une solution qui me convient assez bien, malgré qu'à nouveau, rien ne fonctionne si javascript est désactivé.

J'ai placé un exemple en ligne de la méthode.

Qu'en pensez-vous?

As-tu essayé le script que je viens de te donner ? ... parce que c'est prévu pour n'agir ainsi qu'en cas de JS activé... Dans le cas inverse, la liste apparaît et le titre n'est pas cliquable... Si t'as besoin de le faire sur plusieurs éléments, tu n'as qu'à passer les id en arguments plutôt que de l'écrire directement dans le script...

koala64 a écrit :
As-tu essayé le script que je viens de te donner ? ... parce que c'est prévu pour n'agir ainsi qu'en cas de JS activé... Dans le cas inverse, la liste apparaît et le titre n'est pas cliquable... Si t'as besoin de le faire sur plusieurs éléments, tu n'as qu'à passer les id en arguments plutôt que de l'écrire directement dans le script...

Oui oui, j'ai bien essayé et ta solution est de loin supérieure... mais je n'y comprends rien J'ai effectivement besoin d'appliquer la méthode à plusieurs éléments, mais je comprends pas ce que signifie:

a écrit :
passer les id en arguments plutôt que de l'écrire directement dans le script

Je vais pas recopier/recoller mon code ^^ mais :
ta fonction JS:

montre(ton_element) {
document.getElementById(ton_element).style.display='block';
}

ton html:

<a href="#" onclick="javascript:montre('ton_id')">lien</a>
<div id="ton_id">
contenu
</div>

L'id de la balise <div> est passé en argument dans la fonction montre() et récupérer par la variable ton_element
Modifié par DarkHerumor (12 Dec 2006 - 15:19)

oui, voilà, c'est ce principe...

En externe, ça donne :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
					  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
	<head>
		<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
		<title>Exemple</title>
		<style type="text/css">/*<![CDATA[*/

a
{
	display: block;
}
.cache
{
	display: none;
}
.montre
{
	display: list-item;
}

		/*]]>*/</style><script type="text/javascript">//<![CDATA[

function Init(ctrl, id)
{
	var oUl = document.getElementById(id);
	oUl.className = 'cache';
	var oH2 = document.getElementById(ctrl), oA = document.createElement('a'), oTxtA = document.createTextNode(oH2.firstChild.nodeValue);
	oA.href= '#';
	oA.appendChild(oTxtA);
	document.body.replaceChild(oA, oH2);
	oA.onclick = function() { Display(id); return false; };
		
};

function Display(id)
{
	var oUl = document.getElementById(id);
	oUl.className = (oUl.className == 'cache') ? 'montre' : 'cache';
}

window.onload = function()
{
	Init('CtrlFruits', 'fruits');
	Init('CtrlLegumes', 'legumes');
};

		//]]></script></head><body>

<h2 id="CtrlFruits">Fruits</h2>
<ul id="fruits">
	<li>Kiwi</li>
	<li>Poire</li>
	<li>Fraise</li>
	<li>Banane</li>
	<li>Mangue</li>
</ul>

<h2 id="CtrlLegumes">Légumes</h2>
<ul id="legumes">
	<li>Haricots</li>
	<li>Carottes</li>
	<li>Artichauts</li>
	<li>Riz</li>
	<li>Salade</li>
</ul>

</body></html>

Merci 1000 fois koala, ton script correspond exactement à ce que je cherchais!

Sujet résolu!

Bonjour,

Je reviens à la charge avec un problème auquel je n'avais évidemment pas pensé... Lorsque je clique sur un titre, le contenu que je désire voir s'afficher — en l'occurence une vidéo au format .mov — apparaît bien comme il faut. Malheureusement, lorsque je referme le contenu en question en cliquant à nouveau sur le même titre, la vidéo continue naturellement à tourner et la bande sonore ne cesse donc de jouer!

Est-il possible d'arrêter la lecture de ma vidéo lorsque je reclique sur mon titre?

Cordialement,
Benjamin

Surement en ajoutant un bout de code dans la fonction Js qui ouvre/ferme ton menu mais je serais pas dire laquel je manip pas de vidéo...

La méhtode adéquate est stop.
Attention, sur certains navigateurs, le S est majuscule (par exemple avec ff et le plugin QuickTime)