Skip to content

Javascript – Hide all elements that do not have the specified ID

Hey there StackOverflow Community!

I’m fairly new to Stack and coding in general so this code will probably have an obvious error that I can’t figure out.

Basically, in the following code I want everything shown on screen that isn’t the element with the id settings to be hidden.

if ((!"#settings").style.display === "block") {
        $(!"#settings").hide();
    }

HTML:

<body>
    <span id="mainBtnArea">
        <button id="settings-btn">Settings</button>
        <button id="stats-btn">Stats</button>
    </span>
    <div id="mainArea">
        <h1 id="clickHeader"></h1>
        <button id="main-btn">Click Me</button>
    </div>
    <div id="settings">
        <h1>this is the page I want to show</h1>
    </div>
    <div id="stats">
        <p id="stats-clicks" class="stats">Keys:</p>
        <p id="stats-keys" class="stats">Keys:</p>
    </div>
</body>

Answer

    var elements = document.getElementsByTagName('div');
for (var i = 0; i < elements.length; i++) {
    if (elements[i].id != 'settings') {
        elements[i].style.display = 'none';
    }
}

You need to have a forloop! Update: You have to add an element tag DIV in order for it to work. Please see above.

It works for me: https://jsfiddle.net/bowtiekreative/j697okqd/1/