Question

I need to hide all elements of type ‘section’ in my document apart from one with a particular ID.

In jquery this would be easy

$("section").hide();
$("section#myId").show();

How would I do this without jquery??

(I need it to happen as soon as the page loads and to not be noticable). I also need it to work cross browser.

Thanks.

Answer 1

Place the following immediately before the </body> in your HTML

<script>
(function () {
  for(var els = document.getElementsByTagName ('section'), i = els.length; i--;)
    els[i].id !== "myId" && (els[i].style.display = "none");
}) ();
</script>

or in “modern” (HTML5) browsers :

<script>
  [].forEach.call (document.querySelectorAll ('section'),
    function (el) { el.id !== "myId" && (el.style.display = "none"); })
</script>