Prosty accordion

Chyba javascriptowe menu typu accordion widział każdy. Pokażę jak stworzyć tego typu menu w czystym javascripcie. Będzie to najprostsza jego forma tzn. z pokazywaniem i ukrywaniem divów. Tutaj demo accordiona. Na początek przygotujmy html dla naszego przykładu. W sekcji head umieścimy skrypt. Sekcja body natomiast będzie taka jak poniżej.

<a href="#" id="a1" style="">paragraf 1</a>
<div id="c1" style="">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</div>
<a href="#" id="a2" style="">paragraf 2</a>
<div id="c2" style="">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</div>
<a href="#" id="a3" style="">paragraf 3</a>
<div id="c3" style="">The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections 1.10.32 and 1.10.33 from "de Finibus Bonorum et Malorum" by Cicero are also reproduced in their exact original form, accompanied by English versions from the 1914 translation by H. Rackham.</div>

Widzimy serię elementów a oraz div występujących po sobie. Po kliknięciu na odnośnik związany z nim div będzie się pokazywał, natomiast wszystkie pozostałe bloki ukryją się.
Przejdźmy teraz do implementacji tego mechanizmu w javascript. Określimy najpierw zmienną reprezentującą ilość divów składających się na nasze menu.

var ilosc_divow = 3;

Stworzymy teraz funkcję toggle, która będzie przyjmowała parametr w postaci identyfikatora elementu a np. a1. Następnie podany identyfikator kojarzymy z identyfikatorem diva, który ma zostać pokazany po kliknięciu na odnośnik. Oto początek naszej funkcji

function toggle(ident)
{
	var identyfikator = 'c'+ident.charAt(1);
}

Pod zmienną identyfikator zapisujemy identyfikator diva, który ma zostać pokazany po kliknięciu na określony link (wyznaczony przez ident). Uzyskujemy go konkatenując literę "c" z liczbą przekazaną w identyfikatorze elementu a (funkcja charAt(1) pobiera drugi znak z ciągu znaków).
Teraz zajmiemy się najważniejszą częścią funkcji czyli pokazywaniu diva skojarzonego z elementem a oraz ukrywaniu pozostałych bloków. Kod całej funkcji widzimy poniżej.

function toggle(ident)
{
var identyfikator = 'c'+ident.charAt(1);	if(document.getElementById(identyfikator).style.display=='none')
	{
		document.getElementById(identyfikator).style.display='block';
		for(var j = 1; j <= ilosc_divow; j++)
		{
			if(!('c'+j==identyfikator))
			{
				document.getElementById('c'+j).style.display='none';
			}
		}
	}
}

Jak to działa?
Najpierw sprawdzamy czy div o określonym identyfikatorze jest wyświetlony. Jeśli nie pokazujemy go (display: block) oraz ukrywamy pozostałe bloki. Za ich ukrywanie odpowiada pętla for. Przechodzimy w niej przez wszystkie bloki i ukrywamy te, których identyfikator jest różny od identyfikatora wcześniej wyświetlonego diva.
Pozostaje tylko ustawić dla wszystkich linków funkcję obsługi zdarzenia click na toggle() oraz ukryć wszystkie bloki oprócz pierwszego (realizuje to pierwsza pętla for).

function init()
{
	for(var i = 2; i <= ilosc_divow; i++)
	{
		var ident = 'c'+i;
		document.getElementById(ident).style.display="none";
	}
	for(var i = 1; i <= ilosc_divow; i++)
	{
		var ident = 'a'+i;
		document.getElementById(ident).onclick = function() { toggle(this.id); }
	}
}
window.onload = init;

Oczywiście funkcja init() rozpoczyna działanie po załadowaniu dokumentu (onload). W innym przypadku nie mielibyśmy na czym operować.