Toggle display with javascript vanilla

Question

How to toggle display with Javascript Vanilla when I click a checkbox.

I tried with only one element and it works but when there is more than one...I put this in my code-->

function OnlyOK(){      
var ul = document.getElementsByClassName('RQ');
        for (i = 0; i < ul.length; i++) {
              ul[i].style.display = 'none';
      }
//else ul[i].style.display = 'block';???
    }

And the case of toggle display(none,block) only one element (1 first element)...This Works!!

function OnlyOK(){  
  var ul = document.getElementsByClassName('RQ');
  ul.style.display = ul.style.display === 'none' ? '' : 'none';
}

I tried getElementsById too! but I prefer to work with class.

Are you sure you got everything ok in your HTML? It seems to work here. — Peter_Fretter
– Peter_Fretter, Commented Sep 28, 2016 at 19:18
yes...the first code is not working the second yes!! But I need the first — Pablo Malynovytch
– Pablo Malynovytch, Commented Sep 28, 2016 at 19:41
The second one cannot work ... I think you forgot the index ul[0] or similar — devnull69
– devnull69, Commented Sep 28, 2016 at 19:44
And the first code seems to work fine, as @Peter_Fretter already mentioned — devnull69
– devnull69, Commented Sep 28, 2016 at 19:48
Of course, the first example is not a toggle code because you didn't use the same code as in your second example — devnull69
– devnull69, Commented Sep 28, 2016 at 19:49

Peter_Fretter · Accepted Answer · 2016-09-28 19:52:23Z

3

So basically you want to hide some elements when you click and check a checkbox and show them again after you uncheck the checkbox, right?

You can achieve such a thing like this:

function OnlyOK(flag){      
    var ul = document.getElementsByClassName('RQ');
    for (i = 0; i < ul.length; i++) {
          if (flag) {
            ul[i].style.display = 'none';
          } else {
            ul[i].style.display = 'block';
          }

     }
}

document.querySelector('#ck')
    .addEventListener('change', function(event) {
      console.log(event);
      OnlyOK(event.target.checked);
    });

With this HTML:

<ul>
   <li class="RQ">Some item to hide</li>
   <li class="RQ">Hide me</li>
   <li class="RQ">I will be gone</li>
   <li>I do not have class :(</li>
</ul>

<input type="checkbox" id="ck"/>

Here is a working example.

answered Sep 28, 2016 at 19:52

Peter_Fretter

1,15012 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Pablo Malynovytch Over a year ago

Cannot read property 'addEventListener' of null what can be the problem???...I put the ck id and the new javascript code..Can be because I don have jquery installed?

Peter_Fretter Over a year ago

My example is not using jQuery so that wouldn't be the case. It seems to me from what you are telling that it doesn't find the element. Is my example from JSBin working for you?

Pablo Malynovytch Over a year ago

no...I try all of ur code...the same as you but in the console it says I have an error

Gabriel O. Nieves · Accepted Answer · 2016-09-28 20:00:55Z

0

<input type="checkbox" class="eq" onchange="onlyOk(this)"></input>

function onlyOk(obj){
var rq = document.getElementsByClassName("RQ");
var i;
var display = obj.checked ? "none" : "";

        for (i = 0; i > rq.length; i++){
                rq[i].style.display = display;
        }

}

edited Sep 28, 2016 at 20:00

answered Sep 28, 2016 at 19:56

Gabriel O. Nieves

816 bronze badges

2 Comments

Marcelo Over a year ago

You can eliminate one loop using a variable: var display = obj.checked ? "none" : ""; and use it to assign to each element.

Gabriel O. Nieves Over a year ago

Good fix, that cut half of the function code! @Marcelo

Collectives™ on Stack Overflow

Toggle display with javascript vanilla

2 Answers 2

3 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related