Simple setting off display: none / block with javascript

Question

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

What should happen? Your code in the fiddle doesn't make sense at all. By the way, it's always a bad idea to ask questions like: I have this (...) whats wrong... — Christian, Dec 06 '13 at 12:05
I just realized, after answering, that the code in your answer does not correspond to the JSFiddle example... which one is the code you were working on? — Raphael Müller, Dec 06 '13 at 12:18
I just forgot to update the jsfiddle. Could you please take a look at it again. I would like to know, why I have to click 2 times for the first time to show the subrow. — emjay, Dec 06 '13 at 12:36

invert · Accepted Answer · 2013-12-06T13:00:27.507

7

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';
}

edited Dec 06 '13 at 13:00

answered Dec 06 '13 at 12:22

invert

2,016
14
20

I just forgot to update the jsfiddle. Could you please take a look at it again. I would like to know, why I have to click 2 times for the first time to show the subrow. – emjay Dec 06 '13 at 12:36
@emjay ah good job. you click twice because your element `display` property is unset, so it is neither `none` nor `block`. If you swap your `block` and `none` tests in the javascript it works as expected. – invert Dec 06 '13 at 12:54
That is, change all 'none' to 'block', and vice versa. – invert Dec 06 '13 at 12:56

score 3 · Answer 2 · answered Dec 06 '13 at 12:14

3

First of all, in your JSFiddle example, the function is wrapped into a domready event. You should change the wrap of your JavaScript to No wrap - in body. This can be set up in the second dropdown in the left bar. Your function won't be accessible otherwise.

Then, the second line in your JavaScript searches for an element with an ID - but your document does not contain any ID's, it contains classes. document.getElementById can only find elements by their IDs.

I would suggest that you use jQuery for this task. With jQuery, the task can be solved like this:

HTML:

<table>
    <tr class="odd"><td>Product 1</td></tr>
    <tr class="trigger"><td>&gt; Product 2</td></tr>
    <tr class="even"><td>&nbsp;&nbsp; Information 1</td></tr>
    <tr class="even"><td>&nbsp;&nbsp; Information 2</td></tr>
    <tr class="odd"><td>Product 3</td></tr>
    <tr class="even"><td>Product 4</td></tr>       
</table>

JavaScript:

$(document).ready(function() {
    $(".trigger").click(function() {
        $(".even").toggle();
    });
});

JSFiddle

jQuery Toggle Documentation

answered Dec 06 '13 at 12:14

Raphael Müller

971
2
8
20

But in my question above, you can find a table row with an id and this one I wan't to hide. – emjay Dec 06 '13 at 12:34
Okay, then you can use `$("#sub2").toggle();` instead of `$(".even").toggle();` to toggle the element. – Raphael Müller Dec 06 '13 at 12:37
It's working right now. I updated the jsfiddle. I just would like to know why i have to click 2 times at first. Than it works with every click. – emjay Dec 06 '13 at 12:38
I assume it is because `el.style.display` is not set at page load. Try setting it with the style attribute: `style="display:none;"` (or block) [Updated JSFiddle](http://jsfiddle.net/8B3M4/19/) – Raphael Müller Dec 06 '13 at 12:46
Oh I see, I set the display: none via CSS. An with the first click it's written in the tr tag, and the second klick changes it. – emjay Dec 06 '13 at 12:48

score 1 · Answer 3 · answered Dec 06 '13 at 12:52

I don't know to explain to you why this is happening, but you need to check if css display property is set to none or it is empty. So this will trigger your function from the first time, otherwise it will go to "else", and then trigger on the next click.

So you need to check the following conditions:

if( el && el.style.display === 'none' || el.style.display === '')

Simple setting off display: none / block with javascript

3 Answers3

Linked