How to show / hide multiple elements at the same time with javascript

Question

So, I have this between my head tags

<script type="text/javascript">
hidden_links = document.getElementsByName("javascript_needed");
    for (i = 0; i < hidden_links.length; i++) {
        hidden_links[i].style.display = "visible";
    }
</script>

And my divs are all similar to

    <div name="javascript_needed" style="display: none;">stuff</div>

the overall goal here, is to have these divs hide when javascript is disabled, and re-enable them when javascript is enabled.... but for whatever reason, my code doesn't work. I ever tried it in the webkit console, and nothing errored =\

Skilldrick · Accepted Answer · 2010-06-11T15:02:22.610

4

The JavaScript is executed before the divs are in the DOM. The standard way to do something after the DOM is ready is to use jQuery's $(document).ready(function () { });, but there are other ways as well.

The oldschool way is to use <body onload="myfunction()">.

Here's a newer way (edit: put display:none into CSS):

HTML:

<p class='javascript_needed'>hello</p>

CSS:

.javascript_needed {display:none;}

JavaScript:

$(document).ready(function () {
    $('.javascript_needed').show();
});

edited Jun 11 '10 at 15:02

answered Jun 11 '10 at 14:51

Skilldrick

69,215
34
177
229

Read the question: when javascript is disabled ^) – VMAtm Jun 11 '10 at 14:52
@VMATm - I did. The divs are hidden with `display:none` when JavaScript is disabled. The JavaScript is there to set display to visible. – Skilldrick Jun 11 '10 at 14:54
Rather than use an inline `onload` handler, you can unobtrusively do `window.onload = function() { ... }` in your JS. – friedo Jun 11 '10 at 14:57
brilliant! the webkit debugger should try to mention that... like... "unexecutable code" or something like that.. – NullVoxPopuli Jun 11 '10 at 15:02
@DerNalia the code executes just fine, but the array returned from `getElementsByName` will be empty. Also do take a look at my answer, it might be a slightly cleaner way to accomplish this goal. – s4y Jun 11 '10 at 15:20

Andrew · Answer 2 · 2010-06-11T15:05:29.300

Your JS should be setting the div's display to "block" ("visible" isn't a valid value for display).

Also, from the looks of things your elements aren't in the DOM at the time the code is fired (your code doesn't see them yet). Do any of the following:

Place your code anywhere in the document body below the divs

or, use an unobtrusive strategy to fire your function on window load, a la:

function addLoadEvent(func) {
  var oldonload = window.onload;
  if (typeof window.onload != 'function') {
    window.onload = func;
  } else {
    window.onload = function() {
      if (oldonload) {
        oldonload();
      }
      func();
    }
  }
}

addLoadEvent(nameOfSomeFunctionToRunOnPageLoad);

or, Use a JS framework's "ready" functionality, a la jQuery's:

$(function () {
    nameOfSomeFunctionToRunOnPageLoad();
});

score 0 · Answer 3 · answered Jun 11 '10 at 14:53

0

"visible" is not a valid value for "display". You're after "inline" or "block".

"visible" and "hidden" are valid values for the "visibility" CSS property.

answered Jun 11 '10 at 14:53

Matt

74,352
26
153
180

`display:none` removes the object from the flow, whereas `visibility:hidden` leaves the object in the flow but you can't see it. It depends whether you want to leave gaps or not. – Skilldrick Jun 11 '10 at 14:56
but, changing "visible" to block in the JS doesnt work... I don't even think the JS is executing... shouldn't it execute when its loaded? cause its in the head tags? – NullVoxPopuli Jun 11 '10 at 14:58
@DerNalia: If your JavaScript isn't wrapped in any `onload` function, it will run before the DOM is loaded. If you do `alert(document.getElementsByName("javascript_needed").length)`, you can see what elements are matching it. If it's "0", you need to wait for the DOM to load. – Matt Jun 11 '10 at 15:00

score 0 · Answer 4 · answered Jun 11 '10 at 15:01

Difference between display and visible:

An element that is visible still takes up space on the page. The adjacent content is not rearranged when the element is toggled between visible and hidden.
An element that is display=none will not take up any space on the page. Other display values will cause the element to take up space. For example, display=block not only displays the element, but adds line breaks before and after it.

score 0 · Answer 5 · answered Jun 11 '10 at 15:13

0

The disadvantage of showing elements on ready is that they will only flicker in after the page has finished loading. This usually looks odd.

Here's what I usually do. In a script in the <head> of the document (which runs before the body begins to render), do this:

document.documentElement.className = "JS";

Then, any CSS selectors that descend from .JS will only match if JavaScript is enabled. Let's say you give your links a class of javascriptNeeded (a class is more appropriate than a name here). Add this to your CSS:

.javascriptNeeded{
 display: none;
}
.JS .javascriptNeeded{

 display: inline;
}

…and the elements will be there from the start, but only if JavaScript is enabled.

answered Jun 11 '10 at 15:13

s4y

50,525
12
70
98

According to jQuery docs: "Everything that you stick inside its brackets is ready to go at the earliest possible moment — as soon as the DOM is registered by the browser, which allows for some nice hiding and showing effects and other stuff immediately when the user first sees the page elements." `http://docs.jquery.com/Tutorials:Introducing_$(document).ready()` – Skilldrick Jun 11 '10 at 15:24
@Skilldrick: Yes, but the "earliest possible moment" is still *after* the page has been rendered to the screen. There will be a flicker. – s4y Jun 11 '10 at 15:49

How to show / hide multiple elements at the same time with javascript

5 Answers5

Linked