Hide/Show a div in a list

Question

I have a list with an arbitrary number of items. Each item has a number of actions that can be done onto it. I want to display those actions in a div that appears when the user clicks a link associated with the specific list item.

I have tried the following code but when I click the link it just shows the first hidden div and not the hidden div associated with the link.

<script language="javascript"> 
function toggleOptions() {
        var ele = this;
        var text = this.parentNode.getElementsByClassName("displayOptions");


    if(ele.style.display == "block") {
        ele.style.display = "none";
    text.innerHTML = "TESTING";
    }
    else {
    ele.style.display = "block";
    text.innerHTML = "Hide GPS";
    }
} 

HERE IS THE HTML. The list could be endless though, this is just an excerpt of the list.

     <a href="javascript:toggleOptions();">
        ITEM 1 OPTIONS
     </a>
      <div class="toggleOptions" style="display: none">
        ITEM 1 OPTIONS
     </div>

     <a href="javascript:toggleOptions();">
        ITEM 2 OPTIONS
     </a>
     <div class="toggleOptions" style="display: none">
        ITEM 2 OPTIONS
     </div>

     <a href="javascript:toggleOptions();">
        ITEM 3 OPTIONS
     </a>
      <div class="toggleOptions" style="display: none">
        ITEM 2 OPTIONS
     </div>

Answer 1

.toggleOptions is not a valid id DOM attribute value. Are you trying to get an element by its className? Then you should use getElementsByClassName instead, or remove the leading dot in the literal.

Answer 2

put another div or something around each group: ... put the toggleOptions() function to onclick and pass the href a # so that it is not empty... pass toggleOptions(this) to know which element is clicked

<div>
    <a href="#" onclick="toggleOptions(this);" style="display:block;">
        SHOW
     </a>
      <div class="toggleOptions" style="display: none">
        ITEM 1 OPTIONS
     </div>
</div>
<div>
    <a href="#" onclick="toggleOptions(this);" style="display:block;">
        SHOW
     </a>
      <div class="toggleOptions" style="display: none">
        ITEM 2 OPTIONS
     </div>
</div>
<div>
    <a href="#" onclick="toggleOptions(this);" style="display:block;">
        SHOW
     </a>
      <div class="toggleOptions" style="display: none">
        ITEM 3 OPTIONS
     </div>
</div>​

try with this here http://jsfiddle.net/YE6XZ/1/

function toggleOptions(e) {
    var ele = e;
    var text = e.parentElement.querySelector('.toggleOptions')

if(text.style.display == "none") {
    //ele.style.display = "none";
    text.style.display = "block";
    text.innerHTML = "TESTING";
    ele.innerHTML = "hide";
}
else {
    text.style.display = "none";
    //text.innerHTML = "Hide GPS";
    ele.innerHTML = "show";
}

return false;

}