How can a CSS class be used to toggle the visibility of a DIV element with JavaScript?

Question

How can a CSS class be used to toggle the visibility of a DIV element with JavaScript?

I've been researching and came across several scripts that allow for toggling the contents of a DIV by clicking on a button, however, they all use IDs.

What I am looking to achieve is similar but using classes instead of IDs. This way, if I want to have multiple DIVs that toggle between hide and show, I won't need to add extra code.

Below is a sample code snippet:

<script language="javascript"> 
function toggle() {
    var ele = document.getElementsByClassName("toggleText")[0];
    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 class="toggleText" style="display: none"><h1>peek-a-boo</h1></div>

Would appreciate any assistance with this matter.

Thank you

javascript jquery html css

Answer 1

Answer №1

Can jQuery be used for this task? Hopefully, as it provides the functionality you need:

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

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

Answer 2

Can jQuery be used for this task? Hopefully, as it provides the functionality you need:

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

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

Answer 3

Answer №2

Figuring out the solution in jQuery shouldn't be too difficult, but since your code is in vanilla JavaScript, here's how you can implement it using JavaScript.

One potential drawback to keep in mind is that some browsers may not support the getElementsByTagName method. I have tested it on IE7 and confirmed that it works, but its compatibility with older versions is uncertain.

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;

Give it a try: http://jsfiddle.net/robert/PkHYf/

Answer 4

Figuring out the solution in jQuery shouldn't be too difficult, but since your code is in vanilla JavaScript, here's how you can implement it using JavaScript.

One potential drawback to keep in mind is that some browsers may not support the getElementsByTagName method. I have tested it on IE7 and confirmed that it works, but its compatibility with older versions is uncertain.

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;

Give it a try: http://jsfiddle.net/robert/PkHYf/

Answer 5

Answer №3

Many have mentioned that accomplishing this task in jQuery is simple with a jquery selector and the .hide method. However, if you prefer to learn how to do it without relying on a framework, here are some alternative methods:

Consider these options:

JQuery Method: Utilize jQuery selectors along with the .hide() method.

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

Vanilla JS: Directly Modify CSS:

    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

Many have mentioned that accomplishing this task in jQuery is simple with a jquery selector and the .hide method. However, if you prefer to learn how to do it without relying on a framework, here are some alternative methods:

Consider these options:

JQuery Method: Utilize jQuery selectors along with the .hide() method.

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

Vanilla JS: Directly Modify CSS:

    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 7

Answer №4

Could this possibly be achieved by:

document.querySelectorAll('.classname').forEach(element => {
  element.style.display = 'none';
});

Alternatively, gather all the elements intended for hiding inside a parent div and conceal that whole container.

Answer 8

Could this possibly be achieved by:

document.querySelectorAll('.classname').forEach(element => {
  element.style.display = 'none';
});

Alternatively, gather all the elements intended for hiding inside a parent div and conceal that whole container.

Answer 9

Answer №5

Implementing jQuery:

$(".element").hide();

Replace element with the actual class name.

Answer 10

Implementing jQuery:

$(".element").hide();

Replace element with the actual class name.

Answer 11

Answer №6

To hide an element with a specific class, you can use the code $(".className").hide();

The jQuery function $(".somthing") serves the same purpose as $("#somthing"), but it targets classes instead of IDs.

Answer 12

To hide an element with a specific class, you can use the code $(".className").hide();

The jQuery function $(".somthing") serves the same purpose as $("#somthing"), but it targets classes instead of IDs.

Answer 13

Answer №7

To locate an element by its ID using jQuery Selectors, the syntax is:

$("#id")

To target elements by their classes, simply use this format:

$(".className")

If you prefer not to use jQuery, it can be a bit more challenging, but you can refer to this Stack Overflow post for guidance:

How to getElementByClass instead of GetElementById with Javascript?

Answer 14

To locate an element by its ID using jQuery Selectors, the syntax is:

$("#id")

To target elements by their classes, simply use this format:

$(".className")

If you prefer not to use jQuery, it can be a bit more challenging, but you can refer to this Stack Overflow post for guidance:

How to getElementByClass instead of GetElementById with Javascript?

Answer 15

Answer №8

If you're looking for a solution using Vanilla JS, check out this helpful resource:

The key is to add or remove the .hidden CSS class.

Answer 16

If you're looking for a solution using Vanilla JS, check out this helpful resource:

The key is to add or remove the .hidden CSS class.

How can a CSS class be used to toggle the visibility of a DIV element with JavaScript?

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Answer №6

Answer №7

Answer №8

Similar questions

Tips for avoiding multiple function calls in React JS when a value changes

Updating Mongoose References

Retrieving a result from the reduce function in Angular

refetchQueries may be effective for specific queries

Comparison: Chrome extension - utilizing default pop-up vs injecting a div directly into the page

Steps for incorporating Bootstrap 5 pagination without using jQuery

Django Ajax filter displaying issue on HTML page

Navigating through cors in next.js

Using Angular function to retrieve Firebase snapshot

Clicking on a link in HTML with the onclick event

Examples of how to specify a child class in CSS

Using a jQuery function with onclick events in a loop

Implementing Asynchronous Rendering in React Router 4

The picture is malfunctioning

Is it possible to arrange two items in one column and the rest as columns in MaterialUI Grid?

Retrieving a file URL from Sanity within a blocks array

Creating an interactive button using RichFaces and Bootstrap for seamless Ajax functionality

Unable to view form data in .php file

bash: The command "nodemon" could not be located

How to align a div in the center while another div is floated to the right?