JSFiddle - React, Tailwind, and code Playground

HTML

<a href="#" onclick="toggle_visibility('.foo');return false">Toggle single foo</a>
||
<a href="#" onclick="toggle_all_visibility('.bar');return false">Toggle multiple bar</a>
<div class="foo" style="display: block;">This is foo</div>
<div class="foo" style="display: block;">This is foo</div>
<div class="bar" style="display: block;">This is bar</div>
<div class="bar" style="display: block;">This is bar</div>

CSS

div {
    display: block;
}

JavaScript

function toggle_visibility(selector) {
   var e = document.querySelector(selector);
   if(e.style.display == 'block')
      e.style.display = 'none';
   else
      e.style.display = 'block';
}

function toggle_all_visibility(selector) {
    var list = document.querySelectorAll(selector);
    for(var i=0; i<list.length; i++) {
        if(list[i].style.display === 'block') list[i].style.display = 'none';
        else list[i].style.display = 'block';
    }

}