Simple setting off display: none / block with javascript

Question

I have the following Code: ```

Entry 1

> Entry 2

Information 1
Information 2

Entry 3

Entry 4

``` and the following js: ``` function showHide(id) { var el = document.getElementById(id); if( el && el.style.display == 'none') el.style.display = 'block'; else el.style.display = 'none'; } ``` with this css: ``` tr.odd{ background-color: #dedede; } tr.even{ background-color: #7ea9ff; } tr.clickable{ cursor: pointer; } tr.clickable:hover{ color: white; } tr[id^="sub"]{ display: none; } ``` Could someone please tell me, why it doesn't work? I'm trying to show / hide onclick the row with the id="sub2" example in jsfiddle

Accepted Answer

Open your debug console when you run your code, and you will get the message "ReferenceError: showHide is not defined".

If you place your html and javascript inside a file and run that that particular issue is resolved. It has something to do with the order with which jsfiddle processes sources.

Secondly, you are trying to get an element by id, but give it the class name - that does not make sense. By giving elements id's and using that it works.

But this is very unwieldy, and just serves to explain why it did not work. You are better off using jQuery as raphael said.

edit: replaced html with link

```
function showHide(id) {
    var el = document.getElementById(id);
    if( el && el.style.display == 'block')    
        el.style.display = 'none';
    else 
        el.style.display = 'block';
}
```

Simple setting off display: none / block with javascript

Solution

Problem