Skip to content
Advertisement

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>

Advertisement

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/

User contributions licensed under: CC BY-SA
3 People found this is helpful
Advertisement