CODEWITHSUNDEEP
javascript
Riftzy
Riftzy

Reputation: 3

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>

Upvotes: 0

Views: 627

Answers (2)

Ryan Perez
Ryan Perez

Reputation: 139

    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/

Upvotes: 0

Lauren Prete
Lauren Prete

Reputation: 172

Query selectors don't work quite like that - you can't negate a selector with a ! symbol.

You can, however, use the visible selector and the not selector. The following will hide every element that is a child of body ($("body.find"), is a div or span (div, span), is visible (:visible), and doesn't have the id 'settings' (:not('#settings'))

 $("body").find("div:not('#settings'), span").hide()

Upvotes: 1

Related Questions