CODEWITHSUNDEEP
javascriptcss
user1198411
user1198411

Reputation: 149

Display: none/block for elements works in Firefox, not in Safari or Chrome

I'm a JavaScript/CSS novice.

I have a lengthy table of contents in the left cell of a one-row table that is used to control the contents of the right cell. To reduce vertical scrolling, I broke the ToC into two pieces, and toggle their visibility with display: block/display: none.

This works in Firefox 33, but not in Safari 6.2, Chrome 31.0, or the Eclipse built-in browser [OSX 10.8.5].

Here's the code for toggling (first the HTML, then the JavaScript):

<h4>Contents: <a href='javascript:void(0)' onclick="changeToC(1);">Pages 1-12</a>
<a href='javascript:void(0)' onclick="changeToC(2);">Pages 13-24</a></h4>

function changeToC(number) {
    if (number==1) {
        document.getElementById('EiT_ToC2').style="display: none";
        document.getElementById('EiT_ToC1').style="display: block";
    } else {
        alert("trying to show ToC 2"); // DEBUG
        document.getElementById('EiT_ToC1').style="display: none";
        document.getElementById('EiT_ToC2').style="display: block";
    } // end if
} // end changeToC()

The debugging alert() works as expected.

What is my error and how might I fix it? Either plain JavaScript or jQuery is acceptable.

Upvotes: 1

Views: 2044

Answers (1)

user2755150
user2755150

Reputation:

The right syntax is: 

document.getElementById('EiT_ToC1').style.display = "none";

in jquery: 

$("#EiT_ToC1").css("display", "none");

Upvotes: 4

Related Questions