Rozwijane menu za pomocą onClick

Witam,

Dopiero raczkuję w temacie JS, ale nadeszła potrzeba na stworzenie rozwijanego Menu na portalu i nie do końca mogę sobie poradzić.

Menu jest jako tabela (i tak być musi), domyślnie CSSem komórki 2,3,4 i 5 kolumny są ukryte display:none; i za pomocą wywołania funkcji chciałbym, aby się pokazywały. Poniższy skrypt działa, jeśli stosuję w funkcji zapis document.getElementById(obj) i wtedy rozwija jedną komórkę, która ma przypisane odpowiednie ID. Co chcę osiągnąć, to zastosować document.getElementsByClassName(obj), ażebym mógł wywołując funkcję zwinąć wszystkie komórki, mające przypisanie do danej klasy.

 
<script language="javascript" type="text/javascript">
function expandSidemenu(obj) {
	var sidemenu = document.getElementsByClassName(obj)
	if ( sidemenu.style.display != "block" )
		{
			sidemenu.style.display = 'block';
			sidemenu.style.display = 'block';
		}
		else
		{
			sidemenu.style.display = 'none';
			sidemenu.style.display = 'none';	
		}
}
</script>

Domyślam się, że problem leży w getElementsByClassName(obj), czyli ten obj może przetrzymywać tylko jeden element, natomiast pobierając klasą musiałby przetrzymywać ich kilka. Jak wybrnąć z tej sytuacji, żeby można było odwoływać się po funkcji?

https://developer.mozilla.org/en-US/docs/Web/API/document.getElementsByClassName

getElementsByClassName zwraca kolekcje elementow. no bo moze byc wiecej niz jeden, czyli zeby zastosowac kod do poszczegolnych elementow to musisz przeciagnac petle przez ta kolekcje. i wtedy wykonac kod dla kazdego elementu z kolekcji.

Nie za bardzo rozumiem stwierdzenie przeciągnąć... domyślam się że instrukcję w przypadku if==true należy wykonać w pętli dla każdego elementu. Mógłbym liczyć na jakieś jeszcze dokładniejsze naprowadzenie? Chodzi mi o konkretne odwołanie do pojedynczego elementu z kolekcji.

function expandSidemenu(obj) {
	var sidemenu = document.getElementById(obj)
	if ( sidemenu.style.display != "block" )
		{
		while(var i < liczba.elementów.w.kolekcji)
 		sidemenu.style.display = 'block';
 		var i++;
		
		}
		else 
		{ 
		while(var i < liczba.elementów.w.kolekcji)
 		sidemenu.style.display = 'none';
 		var i++;	
 		}

Wiem, że składnia do kitu, ale nie potrafię zapisać swojej myśli poprawnie, chodzi mi tylko o jej przekaz. Mniej więcej takie działanie w pętli powinno załatwić sprawę?

var elements = document.getElementsByClassName("klasaelementu");
    for(var i = 0, length = elements.length; i < length; i++) {
       elements[i].style.display = 'block'; 
    }

powyzszy kod ustawi "display:block" dla kazdego elemtu ktory ma klase "klasaelementu", nie mieszasz tego z id bo twoj drugi kod to pomieszanie pierwszego z drugim.