Forum Alsacréations : CSS et Standards Web

HTML





<h2 id="LabelAbout">À propos</h2>



<div id="about" class="show">

	

Contenu de ma division "about".

La classe "show" sert à afficher par défaut le contenu ciblé.

Il peut être omis ou appliqué ailleurs.



</div>



<h2 id="LabelProjects">Réalisations</h2>



<div id="projects">



Contenu de la division "projects".



</div>







CSS





a {display:block;}



.hide {display:none;}



.show {display:block;}







JavaScript





function Init(label, id) {

    

	var oContent = document.getElementById(id);

	

	if(oContent.className != 'show')

        oContent.className = 'hide';

	    

	var oTitle = document.getElementById(label), oA = document.createElement('a'),

	    oTxtA = document.createTextNode(oTitle.firstChild.nodeValue);

	oA.href= '#';

	oA.appendChild(oTxtA);

	document.body.replaceChild(oA, oTitle);

	oA.onclick = function() { Display(id); return false; };

};



function Display(id) {

	var oContent = document.getElementById(id);

	oContent.className = (oContent.className == 'hide') ? 'show' : 'hide';

}



window.onload = function() {

   



// -----------------------------------------------

// Liste des titres et des contenus correspondants

// -----------------------------------------------





	Init('LabelAbout', 'about');



	Init('LabelProjects', 'projects');

		



};

<h1>Aliments</h1>

<div>

	<h2 id="CtrlFruits">Fruits</h2>

	<ul id="fruits" class="montre">

		<li>Kiwi</li>

		<li>Poire</li>

		<li>Fraise</li>

		<li>Banane</li>

		<li>Mangue</li>

	</ul>

	<h2 id="CtrlLegumes">Légumes</h2>

	<ul>

		<li>Haricots</li>

		<li>Carottes</li>

		<li>Artichauts</li>

		<li>Riz</li>

		<li>Salade</li>

	</ul>

</div>

a, .montre { display: block; }

.cache { display: none; }

(function() {



// Affecte un gestionnaire d'événement à un élément

function connect(oElem, sEvType, fn, bCapture) {

	return document.addEventListener ?

		oElem.addEventListener(sEvType, fn, bCapture || false):

		oElem.attachEvent ?

			oElem.attachEvent('on' + sEvType, fn):

			false;

}



// Annule l'action normale et la propagation d'un clic

function cancelClick(e) {

	if(e && e.stopPropagation && e.preventDefault) {

		e.stopPropagation();

		e.preventDefault();

	}

	else if(e && window.event) {

		window.event.cancelBubble = true;

		window.event.returnValue = false;

	}

	return false;

}



// A partir d'un élément de contrôle et d'un contrôlé, affecte la fonction toggle

function addToggle() {

	var iArg = arguments.length;

	do {

		var oCtrl = arguments[--iArg]['ctrl'];

		if(!oCtrl || typeof (oCtrl) != 'object' || oCtrl.nodeType != 1)

			continue;

		if(oCtrl.nodeName.toLowerCase() != 'a') {

			oCtrl.innerHTML = '<a href="#">' + oCtrl.innerHTML + '</a>';

			oCtrl = oCtrl.firstChild;

		}

		connect(oCtrl, 'click', toggle(arguments[iArg]['el']));

	}

	while(iArg > 0);

}



// Montre/Cache un élément donné

function toggle(oEl) {

	if(oEl.className != 'montre')

		oEl.className = 'cache';

	return function(e) {

		oEl.className = oEl.className == 'cache' ? 'montre' : 'cache';

		return cancelClick(e);

	};

}



// Retourne un élément

function $() {

	return arguments.length == 1 ?

		document.getElementById(arguments[0]) :

		arguments[0].getElementsByTagName(arguments[1])[arguments[2] || 0];

}



// Affecte les actions au chargement de la page

connect(

	window, 'load',

	function() {

		return addToggle(

			{ 'ctrl': $(document, 'h1'), 'el': $(document, 'div') },

			{ 'ctrl': $('CtrlFruits'), 'el': $('fruits') },

			{ 'ctrl': $('CtrlLegumes'), 'el': $(document, 'ul', 1) }

		);

	}

);



})();

{ 'ctrl': $(document, 'h1'), 'el': $(document, 'div') },



			{ 'ctrl': $('CtrlFruits'), 'el': $('fruits') },



			{ 'ctrl': $('CtrlLegumes'), 'el': $(document, 'ul', 1) }

function $() {

	return arguments.length == 1 ?

		document.getElementById(arguments[0]) :

		arguments[0].getElementsByTagName(arguments[1])[arguments[2] || 0];

}

$('CtrlFruits'); // Je sélectionne l'élément ayant l'id "CtrlFruits"

$(document, 'h1'); // Je sélectionne le premier élément h1 au sein de document

$(document, 'ul', 1); // Je sélectionne le second élément ul au sein de document

<ul>

	<li>

		<h1 id="CtrlBoulot7">blablabla</h1>

		<div id="boulot7" class="montre">Bla bla bla bla bla</div>

	</li>

	<li>

		<h1 id="CtrlBoulot6">blablabla</h1>

		<div id="boulot7" class="montre">Bla bla bla bla bla</div>

	</li>

</ul>

div.montre {

	display: block;}



div.cache {

	display: none;}

a, .montre { display: block; }



.cache { display: none; }