Hiding all elements with the same class name? - javascript

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

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

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

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

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

Try :
function showClass(a){
var e = [];
var e = getElementsByClassName(a);
for(i in e ){
if(!e[i])return true;
if(e[i].style.display=="none"){
e[i].style.display="block"
} else {
e[i].style.display="none"
}
}
return true;
}
demo : showClass("float_form");

Related

can't uncheck the check box (hide content while checkbox is unchecked)

I'd like to hide div content while checkbox is unchecked.
Here's my code
I've made almost the same function for the div with id "focus" (big grey frame):
document.getElementById("checkFocus").onchange = function() {
var one = document.getElementById("focus");
if (document.getElementById("checkFocus").checked === true) {
one.style.display = "block";
}
else one.style.display = "none";
}
And it works!
So, I don't understand why the next function doesn't works at all:
document.getElementById("checkMass").onchange = function() {
var elem = document.querySelector("PeriodicTable")
var mass = elem.querySelectorAll("div.element > div.mass");
if (document.getElementById("checkMass").checked === true) {
mass.style.display = "block";
}
else mass.style.display = "none";
}
What am I doing wrong?
elem.querySelectorAll("div.element > div.mass"); doesn't return a single element, it returns a collection of all matches.
That said you can't do mass.style.display on a array, only on a single element so you need to do
if (document.getElementById("checkMass").checked === true) {
for (var i = 0; i < mass.length; i++) {
mass[i].style.display = "block";
}
else {
for (var i = 0; i < mass.length; i++) {
mass[i].style.display = "none";
}
}
instead.
The querySelector("Any CSS rule") needs a rule, . signify class, # signify id, but you have querySelector("PeriodicTable"). Therefor you are looking for elements with tagname of PeriodicTable. Either use document.getElementById('PeriodicTable') or querySelector("#PeriodicTable")
https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector

write this line of jQuery in vanilla javascript

Can someone help me write this line of jQuery in javascript. It applies a single rule of styling to a class.
$('.dataCard').css('visibilty', 'visible !important');
As !important doesn't apply when setting styles with javascript, it would be something like this
var elems = document.querySelectorAll('.dataCard');
for (var i=elems.length; i--;) {
elems[i].style.visibility = 'visible';
}
If you want to make a general purpose function that can replace what you had in jQuery, you could do this:
function setStyle(elemOrSelector, prop, val) {
var items;
if (typeof elemOrSelector === "string") {
// run selector query
items = document.querySelectorAll(elemOrSelector);
} else if (elemOrSelector.nodeName) {
// must be single DOM object
items = [elemOrSelector];
} else if (elemOrSelector.length)
// must be an array or nodeList
items = elemOrSelector;
} else {
// don't know what it is
return;
}
for (var i = 0; i < items.length; i++) {
items[i].style[prop] = val;
}
}
setStyle('.dataCard', "visibility", "visible");
This general purpose function allows you to pass either a DOM element, an array like list of DOM elements or a selector string.
If you don't want the general purposeness, then you can just use this:
function setStyle(selector, prop, val) {
var items = document.querySelectorAll(selector);
for (var i = 0; i < items.length; i++) {
items[i].style[prop] = val;
}
}
setStyle('.dataCard', "visibility", "visible");

Javascript toggle visibility multiple divs

http://blog.movalog.com/a/javascript-toggle-visibility/
this is a page with some code and a script im using in my site for an image gallery, however when trying to toggle the visibility of multiple div's it only works on the first. can someone please fix it to work with multiple div's, i dont know js :)
here is the javascript
<script type="text/javascript">
<!--
function toggle_visibility(id) {
var e = document.getElementById(id);
if(e.style.display == 'block')
e.style.display = 'none';
else
e.style.display = 'block';
}
//-->
</script>
and here is the html code for the links
<tr><td>New York</td>
<td><a href="#" onclick="toggle_visibility('photoshop');">Photoshop Work</td>
<td><a href="#" onclick="toggle_visibility('photography');">Photography</td></tr>
<tr><td><a href="#" onclick="toggle_visibility('art');">Art Projects</td></tr>
wait a sec, could this not be working because it is trying to acess the properties of multiple divs via the "id" property, would it work with the class property and if so would i just change the java script where it says "id" to "class"
It seems that you were trying something like
<div id="a"></div>
<div id="a"></div>
toggle_visibility('a');
The problem is that each id must be unique in the document, so document.getElementById returns a single element, not a collection of elements.
Then, if you want to have more than one element with the same id, you should use classes instead.
<div class="a"></div>
<div class="a"></div>
function toggle_visibility(cl){
var els = document.getElementsByClassName(cl);
for (var i = 0; i < els.length; i++){
var s = els[i].style;
s.display = s.display === 'none' ? 'block' : 'none';
}
}
toggle_visibility('a');
If you want to make it work with multiple classes, use
var toggle_visibility = (function() {
function toggle(cl) {
var els = document.getElementsByClassName(cl);
for(var i = 0; i < els.length; i++){
var s = els[i].style;
s.display = s.display === 'none' ? 'block' : 'none';
}
}
return function(cl) {
if (cl instanceof Array){
for(var i = 0; i < cl.length; i++){
toggle(cl[i]);
}
} else {
toggle(cl);
}
};
})();
toggle_visibility('myclass');
toggle_visibility(['myclass1','myclass2','myclass3']);
You can use
function toggle_visibility(id) {
function toggle(id){
var el = document.getElementById(id);
el.style.display = el.style.display==='none' ? 'block' : 'none';
}
if(id instanceof Array){
for(var i=0; i<id.length; ++i){
toggle(id[i]);
}
}else{
toggle(id);
}
}
And call it like
toggle_visibility('myid');
toggle_visibility(['myid1','myid2','myid3']);
Another possible way is using arguments variable, but that could slow down your code
function toggle_visibility() {
function toggle(id){
var el = document.getElementById(id);
el.style.display = el.style.display==='none' ? 'block' : 'none';
}
for(var i=0; i<arguments.length; ++i){
toggle(arguments[i]);
}
}
And call it like
toggle_visibility('myid');
toggle_visibility('myid1','myid2','myid3');
If you don't want to create the function toggle each time you call toggle_visibility (thanks #David Thomas), you can use
var toggle_visibility = (function(){
function toggle(id){
var el = document.getElementById(id);
el.style.display = el.style.display==='none' ? 'block' : 'none';
}
return function(id){
if(id instanceof Array){
for(var i=0; i<id.length; ++i){
toggle(id[i]);
}
}else{
toggle(id);
}
};
})();
toggle_visibility('myid');
toggle_visibility(['myid1','myid2','myid3']);
Or
var toggle_visibility = (function(){
function toggle(id){
var el = document.getElementById(id);
el.style.display = el.style.display==='none' ? 'block' : 'none';
}
return function(){
for(var i=0; i<arguments.length; ++i){
toggle(arguments[i]);
}
};
})();
toggle_visibility('myid');
toggle_visibility('myid1','myid2','myid3');
You either need to cycle through a list of ids or use a class name as the argument to toggle_visibilty ---- which means you would have to edit the function. It looks like right now you are only calling toggle_visibility on one element.
jQuery makes this kind of thing easier:
<code>
//selects all elements with class="yourClassName"
jQuery(".yourClassName").toggle();
//select all divs
jQuery("div").toogle();
//select all divs inside a container with id="myId"
jQuery("#myId > div").toggle();
</code>
There is a very silly mistake in your code..
Add the id attribute in the td tags id='nyc', etc. and it should work fine

expanding and collapsing folders

I need to get more than one element to toggle open and closed. Right now the function is just selecting the ID, but I'd like to know how to get it to select a class. I thought I could change the document.getElementById to document.getElementByClass but that didn't work.
I picked this bit of code during my search:
#ToggleTarget {display:hidden;}
<script type="text/javascript">
function Toggle() {
var el = document.getElementById("ToggleTarget");
if (el.style.display == "block") {
el.style.display = "none";
}
else {
el.style.display = "block";
}
}
</script>
var getElementsByClassName = function(node, classname) {
if (document.getElementsByClassName) {
return document.getElementsByClassName(classname);
}
var a = [];
var re = new RegExp('(^| )'+classname+'( |$)');
var els = node.getElementsByTagName("*");
for(var i=0,j=els.length; i<j; i++)
if(re.test(els[i].className))a.push(els[i]);
return a;
}
var Toggle = function(){
var tp = getElementsByClassName(document.documentElement,'toggle');
for(var i = 0; i < tp.length; i++){
if(tp[i].style.display=='none')
tp[i].style.display='block'
else
tp[i].style.display='none'
}
}
Use getElementsByClassName and then loop through them.
EDIT
Just make sure they have the class toggle as used in my code above.
UPDATE
Added function for IE support (adopted from https://stackoverflow.com/a/7410966/600101).

How do I get all elements of a particular HTML tag in javascript?

I need to hide all elements of type 'section' in my document apart from one with a particular ID.
In jquery this would be easy
$("section").hide();
$("section#myId").show();
How would I do this without jquery??
(I need it to happen as soon as the page loads and to not be noticable). I also need it to work cross browser.
Thanks.
DOMElement.getElementsByTagName is your friend:
var sections = document.getElementsByTagName('section');
var mySection = null;
for(var i = 0; i < sections.length; ++i) {
if(sections[i].id === "myId") {
mySection = sections[i];
mySection.style.display = "block";
break;
}
sections[i].style.display = "none";
}
Place the following immediately before the </body> in your HTML
<script>
(function () {
for(var els = document.getElementsByTagName ('section'), i = els.length; i--;)
els[i].id !== "myId" && (els[i].style.display = "none");
}) ();
</script>
or in "modern" (HTML5) browsers :
<script>
[].forEach.call (document.querySelectorAll ('section'),
function (el) { el.id !== "myId" && (el.style.display = "none"); })
</script>

Categories