Question

I have the following JS script for a show/hide toggle. I kinda have to keep it in this format because the elements it works on are a lot and formatted badly and it would be too much of a hassle to make it in jQuery.

As the title says, the “show” event is working while the “hide” is not. And since I’m a complete JS noob I was wondering it you could help me. Here’s the code:

function toggle(obj) {
  for (var  i = 0; i< 50; i++) {
    var name = 'q' + i;
    var inchide_obj=document.getElementById(obj);
    if (inchide_obj && inchide_obj.style && inchide_obj.style.display == "block") {
      inchide_obj.style.display = "none";
    }
  }
  var deschide_obj=document.getElementById(obj);
  if (deschide_obj && deschide_obj.style) {
    deschide_obj.style.display = "block";
    deschide_obj.focus();
  }
}

The html implies some blocks of texts each with its own class, q1, q2, etc. Thank you in advance for your help 🙂

Answer 1

Your current code first tries to hide the element 50 times, and eventually shows it at the end, unconditionally. I believe you’re looking for this:

function toggle(id) {
    var obj = document.getElementById(id);
    if (obj && obj.style) {
        if(obj.style.display != "block") {
            obj.style.display = "block";
        } else {
            obj.style.display = "none";
        }
    }
}