Hide-Show all elements with same ID

[jandrews3]

I'm writing a script which needs to hide all elements of a certain ID on page load, and display them upon clicking the link 'Toggle'. The following code hides all the questions, but only shows the first question when 'Toggle' is clicked even though they all have the same ID. I'm very new at javascript and greatly appreciate your help. Thanks.

 

<script type="text/javascript">

function hideshow(which){

if (!document.getElementById)

return

if (which.style.display=="block")

which.style.display="none"

else

which.style.display="block"

}

</script>

 

<a href="javascript:hideshow(document.getElementById('adiv'))">Toggle</a>

 

 

 

<div id="adiv" style="font:24px bold; display: none">Question 1</div>

<div id="adiv" style="font:24px bold; display: none">Question 2</div>

<div id="adiv" style="font:24px bold; display: none">Question 3</div>

<div id="adiv" style="font:24px bold; display: none">Question 4</div>

<div id="adiv" style="font:24px bold; display: none">Question 5</div>

<div id="adiv" style="font:24px bold; display: none">Question 6</div>

<div id="adiv" style="font:24px bold; display: none">Question 7</div>

<div id="adiv" style="font:24px bold; display: none">Question 8</div>

<div id="adiv" style="font:24px bold; display: none">Question 9</div>

<div id="adiv" style="font:24px bold; display: none">Question 10</div>

<div id="adiv" style="font:24px bold; display: none">Question 11</div>

<div id="adiv" style="font:24px bold; display: none">Question 12</div>

 

 

[mac_gyver]

id's, by definition, must each be unique on the page, i.e. you cannot use the same id more than one time on a page.

 

to do what you want, show/hide a group of elements, you can either put the elements inside a containing <div id="adiv"> or give each element the same class name and show/hide them based on the class name.