Cycle through div id array?

JavaScript
1

I’m new to javascript and would like to create a simple expandable menu list. and so the gist of the program would be showing and hiding divs by reassigning them different css classes which will hide and reposition them.

so say I want to asighn the ‘show’ class to the div with id ‘item[1]’, it’s easy to change the class of that particular div, but how do I then assure myself that all other divs are assigned the “hidden” class?

my simple experiment follows:

<script type=“text/javascript”>

function show_div(number)
{
	for (x in document.items)
	{
		if (x == number) { document.items[x].className = "shown"; }
		else { document.items[x].className = "hidden"; }
	}
}

</script>
</head>

<body>
<div id=“items[1]” class=“hidden”>items 1</div>
<div id=“items[2]” class=“hidden”>items 2</div>
<div id=“items[3]” class = “shown”>items 3</div>
<div id=“items[4]” class=“hidden”>items 4</div>
<div id=“items[5]” class=“hidden”>items 5</div>
<div id=“items[6]” class=“hidden”>items 6</div>
<div id=“items[7]” class=“hidden”>items 7</div>
<div id=“items[8]” class=“hidden”>items 8</div>
<div id=“items[9]” class=“hidden”>items 9</div>

<span onclick=“show_div(7);”>show 7</span>

or is there an easier way? :wink:

2

You can’t do “array” syntax like that in HTML. Here’s an alternative:


<div id="itemContainer">
<div class="hidden">items 1</div>
<div class="hidden">items 2</div>
<div class="shown">items 3</div>
<div class="hidden">items 4</div>
<div class="hidden">items 5</div>
<div class="hidden">items 6</div>
<div class="hidden">items 7</div>
<div class="hidden">items 8</div>
<div class="hidden">items 9</div>
</div>

<span onclick="show_div(7);">show 7</span>



function show_div(number)
{
var items = document.getElementById("itemContainer").getElementsByTagName("div");
for (var i = 0; i < items.length; i++)
{
items[i].className = (i == number) ? 'shown' : 'hidden';
}
}