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
Is jquery an option? Hopefully so, because this does what you want:
$(".class").toggle();
or
$(".class").show(); $(".class").hide();
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/
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"; } } }
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.
Using jQuery:
$(".classname").hide();
where classname
is the name of the class.
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?
You could simply use $(".className").hide();
The $(".somthing")
do the same as $("#somthing")
, except it's for a class instead of an ID.
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.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.