show/hide div based on class name

Question

i have a show/hide div javascript function

i want convert it to work with class name instead of style

This is my function that i want convert it

<script>
function toggle(e, id) {
    var el = document.getElementById(id);
    el.style.display = (el.style.display == 'none' || el.style.display == '') ? 'block' : 'none';
    toggle.el = el;
    if (e.stopPropagation) e.stopPropagation();
    e.cancelBubble = true;
    return false;
}
document.onclick = function() {
    if (toggle.el) {
        toggle.el.style.display = 'none';
    }
}
</script>

i want convert it to work with class name,

for example:

#hidden{
display:none;
}
#shown{
display:block;
}
function toggle(e,id){
if(el.class=='hidden'){
el.setAttribute("class", "showen");
}
//etc...
}

Answer 1

First and foremost your CSS is invalid, classes are defined in CSS using . and not #. #'s define IDs, which are always unique to one element in the document. A class on the other hand, is as the name implies, a type of thing that many objects can be. An ID is like the name of a dog "Fido", you should have only one dog named "Fido", whereas a class is like a dog breed, you could have many cockapoos, but each must have a unique name. The other answers to this question fail to correct your CSS, and if you don't correct that, it won't work.

 .hidden{
   display:none;
 }
 .shown{
   display:block;
 }

Secondly, it would make your life a lot easier if you used a JavaScript framework, such as JQuery. Here is the same thing written using JQuery (Jquery library include omitted)

$(document).click(function() {
    var toggleElements = $(".toggleMe");
    $.each(toggleElements, function (key, value) {
       if (value.hasClass('hidden')) {
           value.removeClass('hidden');
           value.addClass('shown');
       } else {
           if (value.hasClass('shown')) {
               value.removeClass('shown');
               value.addClass('hidden');
           }
       }
    });
});

The other thing I'd recommend to improve this would be to instead of using display: block to show, because display:block doesn't necessarily imply simply "shown" vs. "hidden", it implies information about how that element is handled in terms of display, meaning a block element is treated as its full height/width with whitespace as needed no matter, what and any HTML elements next to it are forced to the next line unless explicitly designed otherwise. What you should do instead is simply remove the hidden class.

Answer 2

A little off-topic, but this is even easier if you're using the jquery library.

$(".yourclass").hide();
$(".yourclass").show();

To test if something is showing with jquery:

if ($(".yourclass").is(":visible"))

Obviously there's reasons you might not want to be using jquery, but it has some nifty tools to make things like this easier.

Answer 3

Checking for the existing of a class name in className is not as straightforward as one might think. The following article has an excellent explanation of this and includes the custom function: hasClassName()

function hasClass(el, class_to_match) {
    if (el && el.className && typeof class_to_match === "string") {
        var c = el.getAttribute("class");
        c = " " + c + " ";
        return c.indexOf(" " + class_to_match + " ") > -1;
    }
    else {
        return false;
    }
}

Then you can simply update your toggle function:

function toggle(el, id) {
  if (hasClassName(el, 'hidden')) {
    el.setAttribute("class", "showen");
  }
}

Note: I do advocate using such a Javascript framework/library if you are doing such things often. But if toggling an element's display is only things you do, then I believe they're overkill.