I've got the following, single parameter JS function which hides/shows an html table and works correctly with one small exception - I need to click twice in order for the desired effect to show:

```
function toggle_visibility(id) 
    {
        var e = document.getElementById(id);
        if(e.style.display != 'none')
            e.style.display = 'none';
       else
          e.style.display = 'table';
    }

```

Now, when I add a second parameter and extend the function to toggle between two img source paths, it no longer works. Firebug console does not provide any error message or other clue:

```
function toggle_visibility(id, arrow) 
    {
       var e = document.getElementById(id);
       var i = document.getElementById(arrow);
       if(e.style.display != 'none')
          e.style.display = 'none';
          i.src = 'img/arrowDownWhiteRight.bmp';
       else
          e.style.display = 'table';
          i.src = 'img/arrowDownWhite.bmp';
    }

```

The html element I call the function from presents itself as follows:

```
<tr id="trigger" class="toggle" onclick="toggle_visibility('collapsible1', 'img1')">

```

...

The element for the second parameter:

```
<td id="triggerArrow"><img id="img1" src="img/arrowDownWhiteRight.bmp"></td>

```

The element to be hidden/shown (default is "display: none")

```
<table class="collapsible" id="collapsible1">
    ...

```