Question

183

Hiding all elements with the same class name?

rated 0 times [ 190] [ 7] / answers: 1 / hits: 122501 / 12 Years ago, thu, june 28, 2012, 12:00:00

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;>

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

dylondaytond

Add To Favorites

Follow

Total Points: 92

Total Questions: 88

Total Answers: 96

Location: China

Member since Fri, Jan 15, 2021

3 Years ago

dylondaytond questions

1 React Material UI TextField onchange handler continue default action

Fri, Jun 10, 22, 00:00, 2 Years ago

1 React Autocomplete with Material UI

Tue, Jun 22, 21, 00:00, 3 Years ago

1 ERROR Error: formGroup expects a FormGroup instance. Please pass one in

Tue, Sep 22, 20, 00:00, 4 Years ago

1 Implicitly checking if axios call was success

Thu, May 7, 20, 00:00, 4 Years ago

1 Vue split components from a single .js file in multiple files

Fri, Feb 21, 20, 00:00, 4 Years ago

View All

answered 12 Years ago shelbiec · Accepted Answer

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