Toggling same class names except for one (JavaScript)

Question

I am trying to prevent a paragraph element with a class attribute of 'show' from toggling away on the click event on updateButton . I've tried if else statements but to no avail.

I'm essentially trying to create an editing state when I click update button and all the text on the bottom of these buttons need to show (the paragraph elements). Though there is one button with text underneath it already which I want to prevent from toggling the class .hide.

The other buttons already have the .hide class attribute on them already so when toggled from the click event, they appear.

TLDR: I want to prevent the one paragraph element with no .hide class attribute from toggling it on when I toggle all the other paragraph elements in the .risk-text container.

 // select indicator div const riskIndicator = document.getElementById("Risk__indicator"); // select update button const updateButton = document.getElementById("Update_button"); // Indicator buttons const indicatorButton = document.getElementsByClassName("Risk_indicator_button"); // Indicator 'check every..' text const checkIndicatorText = document.querySelectorAll(".risk-text"); // select update button updateChange: updateButton.addEventListener("click", function (event) { riskIndicator.classList.toggle("active"); }); // If statement to check whether the Risk Indicator is active to apply background changes editState: updateButton.addEventListener("click", function(el) { [].map.call(document.querySelectorAll('.risk-text'), function(el) { // loop through text indicator elements checking to see if it's got a hidden class attribute el.classList.toggle('hide'); }); }); 

Answer 1

Depending on your use case:

If you want to exclude it only once, and then toggle this element with others, do something like:

   editState: updateButton.addEventListener("click", function(el) {
            [].map.call(document.querySelectorAll('.risk-text:not(.hide)'), function(el) {
                // loop through text indicator elements checking to see if it's got a hidden class attribute
                el.classList.toggle('hide');
            });
    });

If you want to leave the "ember" element alone, then

   editState: updateButton.addEventListener("click", function(el) {
            [].map.call(document.querySelectorAll('.risk-text:not(.low_risk_text__wrap--risk-middle-amber)'), function(el) {
                // loop through text indicator elements checking to see if it's got a hidden class attribute
                el.classList.toggle('hide');
            });
    });

You can also add new class, like "spareMe", and exclude it with .not()