Question

I have the following function for changing the CSS display on a given DIV

function(){

    if(document.getElementById('kitstory').style.display === "none")
        {
            document.getElementById('kitstory').style.display = "block";
        } else{
            document.getElementById('kitstory').style.display = "none";
        }
    }

I’m using onclick in a link to call the function as and when required.

This works fine on my DIV with the ID “kitstory”, but is there a way I can use this function for more than one DIV (I’ll have several articles on 1 page with different DIV’s I want the function to effect)? I’ve tried leaving the id blank but it doesn’t run.

Answer 1

Make a named function and send the id as a parameter to the function:

function Toggle(id){
  var element = document.getElementById(id);
  if (element.style.display === "none") {
    element.style.display = "block";
  } else{
    element.style.display = "none";
  }
}

Usage:

Toggle('kitstory');