Function in Anchor tag doesn't work

Question

So I have a couple functions:

function Toggle(id)
{
   EToggle(document.getElementById(id));
}

function EToggle(element)
{
   var subject = element.getElementsByTagName("div")[0];
   if(subject.style.display == "none")
   {
      subject.style.display = "block";
   }
   else
   {
      subject.style.display = "none";
   }
}

The Toggle function is called upon load, and works fine. However, when I say
<a href="javascript:Toggle(flat)"> , nothing happens.

So the question is, why doesn't it work in the link, but on the page load?

If you need more details, here is my website.

Answer 1

use

<a href="javascript:Toggle('flat')">

instead of

<a href="javascript:Toggle(flat)">

Answer 2

Firstly, use single quotes around the id-strings in the html, as Matei mentioned.

Next, change line 31 of collapsible.js

You're asking for the first div contained by the clicked element. The problem is, your <a> tag itself doesn't have any. You're after the div that follows the <a> So, you want to get the parent node's div elements.

var subject = element.parentNode.getElementsByTagName("div")[0];

Remember, your structure is like this:

<div class="collapsible" id="demo">
    <a href="javascript:Toggle('demo')"><h1>Demolition and Removal</h1></a>
    <div style="display: none; ">
        <p>Content removed from here</p>
    </div>
</div>