Html - How to hide all elements with the same class and show one particular id from that class using a radio button?

RobithNurielHaq
December 13, 2023
245 views
2 votes
3 Answers

I have four divs that share the same class, with each having its own unique id. I also have four radios that control their opacity. When a radio is clicked, a relevant div appears (opacity = 1) and the other three divs become hidden.

Here’s my code.

<html>
  <body>
    <div id="div-one" class="my-divs"></div>
    <div id="div-two" class="my-divs"></div>
    <div id="div-three" class="my-divs"></div>
    <div id="div-four" class="my-divs"></div>

    <input type="radio" id="radio-one" name="div-radio" value="div-one"      
    onClick="changeOpacity(this.value);"/>
    <input type="radio" id="radio-one" name="div-radio" value="div-two"      
    onClick="changeOpacity(this.value);"/>
    <input type="radio" id="radio-one" name="div-radio" value="div-three"      
    onClick="changeOpacity(this.value);"/>
    <input type="radio" id="radio-one" name="div-radio" value="div-four"      
    onClick="changeOpacity(this.value);"/>

    <script>
      function changeOpacity(divId) {
        document.getElementById(divId).style.opacity = 1;
        document.querySelectorAll(".my-divs:not(divId)").forEach((e) => {
          e.style.opacity = 0;
        });
      }
    </script>
  </body>
</html>

But this doesn’t seem to work. I think the problem is in the .my-divs:not(divId) part because I don’t know how to exclude an ID from the class selector. I’m expecting a solution using vanilla JS because I’m not familiar yet with JQuery and other libraries. Thanks

Answers

You’re close, The issue is with the :not() selector; it doesn’t work with a variable directly. Instead, you can use a combination of attribute selectors and template literals to dynamically exclude the element with the specified ID.

<html>
  <body>
    <div id="div-one" class="my-divs">1</div>
    <div id="div-two" class="my-divs">2</div>
    <div id="div-three" class="my-divs">3</div>
    <div id="div-four" class="my-divs">4</div>

    <input type="radio" id="radio-one" name="div-radio" value="div-one"      
    onClick="changeOpacity(this.value);"/>
    <input type="radio" id="radio-two" name="div-radio" value="div-two"      
    onClick="changeOpacity(this.value);"/>
    <input type="radio" id="radio-three" name="div-radio" value="div-three"      
    onClick="changeOpacity(this.value);"/>
    <input type="radio" id="radio-four" name="div-radio" value="div-four"      
    onClick="changeOpacity(this.value);"/>

    <script>
      function changeOpacity(divId) {
        document.getElementById(divId).style.opacity = 1;
        
        document.querySelectorAll('.my-divs:not([id="' + divId + '"])').forEach((e) => {
          e.style.opacity = 0;
        });
      }
    </script>
  </body>
</html>

I have added some logic to this code, I hope it will be useful:

      function hideAllDivs() {
        document.querySelectorAll(".my-divs").forEach((e) => {
          e.style.opacity = 0;
        });
      }

      document.addEventListener("DOMContentLoaded", hideAllDivs);

      function changeOpacity(divId) {
        hideAllDivs();
        document.getElementById(divId).style.opacity = 1;
      }

<div id="div-one" class="my-divs">One</div>
    <div id="div-two" class="my-divs">Two</div>
    <div id="div-three" class="my-divs">Three</div>
    <div id="div-four" class="my-divs">Four</div>

    <input type="radio" id="radio-one" name="div-radio" value="div-one"      
    onClick="changeOpacity(this.value);"/>
    <input type="radio" id="radio-two" name="div-radio" value="div-two"      
    onClick="changeOpacity(this.value);"/>
    <input type="radio" id="radio-three" name="div-radio" value="div-three"      
    onClick="changeOpacity(this.value);"/>
    <input type="radio" id="radio-four" name="div-radio" value="div-four"      
    onClick="changeOpacity(this.value);"/>

A simpler apprach would be to hide all the divs and then target the specific one you want and show that.

Note that the code quality can be improved by using unobtrusive event handlers bound in JS< not in HTML, and also by using CSS classes to toggle opacity, and finally by removing the duplicate id attributes which are invalid.

Here’s a working version with the above changes made:

const divs = document.querySelectorAll('.my-divs');
const radios = document.querySelectorAll('input[type="radio"]')

const hideAllDivs = () => divs.forEach(div => div.classList.add('hide'));

const radioHandler = e => {
  hideAllDivs();
  document.querySelector(`#${e.target.value}`).classList.remove('hide');
}
radios.forEach(el => el.addEventListener('change', radioHandler));

.hide {
  opacity: 0;
}

<div id="div-one" class="my-divs">one</div>
<div id="div-two" class="my-divs">two</div>
<div id="div-three" class="my-divs">three</div>
<div id="div-four" class="my-divs">four</div>

<input type="radio" name="div-radio" value="div-one" />
<input type="radio" name="div-radio" value="div-two" />
<input type="radio" name="div-radio" value="div-three" />
<input type="radio" name="div-radio" value="div-four" />

Please signup or login to give your own answer.

Click here to cancel reply.

Html – How to hide all elements with the same class and show one particular id from that class using a radio button?

Answers