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 do the same thing BUT I want to use a class instead of an id so that if I want to have 20 DIV's that toggle ... Hide / Show I don't have to add extra code.

Here is some code:

<script language="javascript"> 
function toggle() {
    var ele = document.getElementById("toggleText");
    var text = document.getElementById("displayText");
    if(ele.style.display == "block") {
            ele.style.display = "none";
        text.innerHTML = "show";
    }
    else {
        ele.style.display = "block";
        text.innerHTML = "hide";
    }
} 
</script>

<a id="displayText" href="javascript:toggle();">show</a> <== click Here
<div id="toggleText" style="display: none"><h1>peek-a-boo</h1></div>

Can anyone help with this please?

Thanks

It's the same as with an id except an id is designated by "#" and a class is designated by a "." — Catfish
– Catfish, Commented Apr 29, 2011 at 19:53
Do you want ALL tags to toggle simultaneously? Or each individually with a generic class to group them under? — Thomas Cheney
– Thomas Cheney, Commented Dec 8, 2013 at 16:56

dpb · Accepted Answer · 2011-04-29 19:53:49Z

15

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

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

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

answered Apr 29, 2011 at 19:53

dpb

1,2052 gold badges9 silver badges20 bronze badges

Add a comment |

Robert · Accepted Answer · 2011-04-29 20:02:30Z

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/

Community · Accepted Answer · 2017-05-23 11:55:07Z

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:

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

$(".CLASSNAME").hide()
Vanilla JS: Dynamic CSS. One approach is to dynamically append stylesheets to the document head -- you can Alter CSS class attributes with javascript?

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

slandau · Accepted Answer · 2011-04-29 19:52:55Z

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.

answered Apr 29, 2011 at 19:52

slandau

24.2k43 gold badges124 silver badges186 bronze badges

Add a comment |

Matthias · Accepted Answer · 2011-04-29 19:53:41Z

2

Using jQuery:

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

where classname is the name of the class.

answered Apr 29, 2011 at 19:53

Matthias

12.3k4 gold badges53 silver badges96 bronze badges

Add a comment |

Mash · Accepted Answer · 2011-04-29 19:56:11Z

1

You could simply use $(".className").hide();

The $(".somthing") do the same as $("#somthing"), except it's for a class instead of an ID.

answered Apr 29, 2011 at 19:56

Mash

1,3497 silver badges8 bronze badges

Add a comment |

Community · Accepted Answer · 2017-05-23 12:18:17Z

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?

edited May 23, 2017 at 12:18

CommunityBot

11 silver badge

answered Apr 29, 2011 at 19:54

Jeff Lambert

24.7k4 gold badges72 silver badges97 bronze badges

Add a comment |

Mooktakim Ahmed · Accepted Answer · 2021-06-24 17:09:24Z

0

This is a great solution to this for Vanilla JS:

https://attacomsian.com/blog/javascript-hide-show-elements-using-css-class

Add/remove a .hidden css class.

answered Jun 24, 2021 at 17:09

Mooktakim Ahmed

1,0311 gold badge10 silver badges18 bronze badges

Add a comment |

Collectives™ on Stack Overflow

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

8 Answers 8

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

8 Answers 8

Your Answer

Sign up or log in

Post as a guest

Linked

Related