Question

101

Simple setting off display: none / block with javascript

rated 0 times [ 103] [ 2] / answers: 1 / hits: 30094 / 11 Years ago, fri, december 6, 2013, 12:00:00

I have the following Code:

<table>

    <tr class=odd><td>Entry 1</td></tr>

    <tr class=even clickable onclick=showHide('sub2')><td>> Entry 2</td></tr>

    <tr class=even id=sub2>

        <td><ul><li>Information 1</li><li>Information 2</li></ul></td>

    </tr>

    <tr class=odd><td>Entry 3</td></tr>

    <tr class=even><td>Entry 4</td></tr>       

</table>

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

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

yulisa

Add To Favorites

Follow

Total Points: 436

Total Questions: 102

Total Answers: 123

Location: Palau

Member since Tue, May 30, 2023

1 Year ago

answered 11 Years ago lucianod · 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';

}