CSS / Javascript Show / Hide DIV using a CSS class?

Question

I\'ve googled around and found many scripts for hiding and showing DIV contents, as a toggle on button click.

But they are work using ID\'s.

I would like to

Answer 1

Using jQuery Selectors, you can find an ID by:

$("#id")

Changing that to select classes is trivial:

$(".className")

Without using jQuery its a little more non-trivial, but you can check this SO question for some help:

How to getElementByClass instead of GetElementById with Javascript?

Answer 2

Wouldn't this just be

$('.classname').hide();

Or group all the elements you want to hide within a container div, and then hide that div.

Answer 3

Most of the jQuery answers should be pretty easy, but seeing as your example is in regular JS, here's how to do it in JS.

Potential downside: browsers that don't support getElementsByTagName. I tested IE7 and it works, but I'm not sure about lower.

var divs = document.getElementsByTagName('div');

var toggle = function() {    
    for (var i = 0, l = divs.length; i < l; i++) {
        if (divs[i].getAttribute('class') == 'problem') 
            if (divs[i].style.display == 'none') divs[i].style.display = '';
            else divs[i].style.display = 'none';
    }
}

document.getElementById('Toggle').onclick = toggle;

Try it out: http://jsfiddle.net/robert/PkHYf/

Answer 4

Is jquery an option? Hopefully so, because this does what you want:

http://api.jquery.com/toggle/

$(".class").toggle();
or
$(".class").show();  $(".class").hide();

Answer 5

As others have said several times, this is easy in jQuery using a jquery selector and the .hide method. However, since you are asking in a general sense and it is a good idea to know how to do it without a framework, that isn't a complete answer.

Here are your options:

1. JQuery Method. Just use jQuery selectors and the .hide() method.

   $(".CLASSNAME").hide()

2. Vanilla JS: Dynamic CSS. One approach is to dynamically append stylesheets to the document head -- you can Alter CSS class attributes with javascript?

3. Vanilla JS: Modify CSS directly:

       var ss = document.styleSheets;
       for (var i=0; i<ss.length; i++) {
           var rules = ss[i].cssRules || ss[i].rules;
   
           for (var j=0; j<rules.length; j++) {
               if (rules[j].selectorText === ".classname") {
                   rules[j].style.visibility = "none";
               }
           }
       }
   

Answer 6

Using jQuery:

$(".classname").hide();

where classname is the name of the class.