Hiding all elements with the same class name?

Question

I'm trying to hide elements with the same class name (float_form), but I'm also trying to use the script below to show them (all of the float_form class divs are initially hidden). I've looked at a lot of jquery solutions, but I can't seem to make any of them work for this.

function show(a) {
    var e = document.getElementById(a);
    if (!e) 
        return true;

    if (e.style.display == "none") {
        e.style.display = "block"
    } else {
        e.style.display = "none"
    }
    return true;
}
​

Edit: Sorry if it wasn't clear, I do not intend to use Jquery(and I know that this is not jquery). I am looking for a way to use javascript to recognize repeated classnames that are not in style= display:none; without compromising the show/hide ID element since there is a loop with the div id as the key. The html for the div looks like below, with {item.ID} being a while loop.

 <div class="float_form" id="{item.ID}" style="display: none;"> 

Answer 1

vanilla javascript

function toggle(className, displayState){
    var elements = document.getElementsByClassName(className)

    for (var i = 0; i < elements.length; i++){
        elements[i].style.display = displayState;
    }
}

toggle('float_form', 'block'); // Shows
toggle('float_form', 'none'); // hides

jQuery:

$('.float_form').show(); // Shows
$('.float_form').hide(); // hides

Answer 2

If you're looking into jQuery, then it's good to know that you can use a class selector inside the parameters of $ and call the method .hide().

$('.myClass').hide(); // all elements with the class myClass will hide.

But if it's a toggle you're looking for, use .toggle();

But here's my take on a good toggle without using jQuery:

function toggle( selector ) {
  var nodes = document.querySelectorAll( selector ),
      node,
      styleProperty = function(a, b) {
        return window.getComputedStyle ? window.getComputedStyle(a).getPropertyValue(b) : a.currentStyle[b];
      };

  [].forEach.call(nodes, function( a, b ) {
    node = a;

    node.style.display = styleProperty(node, 'display') === 'block' ? 'none' : 'block';
  });

}

toggle( '.myClass' );

Demo here (Click "Render" to run): http://jsbin.com/ofusad/2/edit#javascript,html

Answer 3

Using jquery

$(".float_form").each(function(){
    if($(this).css("display") == "none"){
        $(this).show();
    }else{
        $(this).hide();
    }
});

Answer 4

No jQuery needed

const toggleNone = className => {
  let elements = document.getElementsByClassName(className)
  for (let i = 0; i < elements.length; i++){
    if (elements[i].style.display === "none") {
      elements[i].style.display = "";
    } else {
      elements[i].style.display = "none";
    }
  }
}

const toggleVisibility = className => {
  let elements = document.getElementsByClassName(className)
  for (let i = 0; i < elements.length; i++){
    let elements = document.getElementsByClassName(className);
    if (elements[i].style.visibility === "hidden") {
      elements[i].style.visibility = "";
    } else {
      elements[i].style.visibility = "hidden";
    }
  }
}

// run 
toggleNone('your-class-name-here'); // toggles remove
// or run 
toggleVisibility('your-class-name-here'); // toggles hide

Answer provided in ES6 syntax but easily can be converted to ES5 if you wish