Question

Im trying to create a DIV & Span inside a DIV & Span.

I have created the show/hide code that will allow someone to click “Show All” or “Hide All” and all the Spans open and close properly. Or the user can click individually on the DIV and it open that section.

<script type="text/javascript">



function displayMap() {
                document.getElementById('map_canvas').style.display="block";
                initialize();
            }



function showhide(id) {
if (document.getElementById) {
obj = document.getElementById(id);
if (obj.style.display == "") {
  obj.style.display = "none";
} else {
  obj.style.display = "";
}

}
}

function hide(id) {
  if (document.getElementById) {
obj = document.getElementById(id);
if (obj.style.display == "none") {
  obj.style.display = "none";
} else {
  obj.style.display = "none";
}

}
}

function hideall(id1,id2,id3,id4,id5,id6,id7) {
  var status1 = document.getElementById(id1).style.display; 
  var status2 = document.getElementById(id2).style.display; 
  var status3 = document.getElementById(id3).style.display; 
  var status4 = document.getElementById(id4).style.display; 
  var status5 = document.getElementById(id5).style.display; 
  var status6 = document.getElementById(id6).style.display; 
  var status7 = document.getElementById(id7).style.display; 
      if ((status1 == 'none') || (status2 == 'none') || (status3 = 'none') || (status4 = 'none') || (status5 == 'none') || (status6 == 'none') || (status7 == 'none')) {
hide(id1);  hide(id2); hide(id3); hide(id4); hide(id5); hide(id6);hide(id7);     return;

}
if ((status1 != ‘none’) || (status2 != ‘none’) || (status3 != ‘none’) || (status4 != ‘none’) || (status5 == ‘none’) || (status6 == ‘none’) || (status7 == ‘none’))
{hide(id1); hide(id2); hide(id3); hide(id4); hide(id5); hide(id6);hide(id7); return;
}
}

function show(id) {
  if (document.getElementById) {
obj = document.getElementById(id);
if (obj.style.display == "") {
  obj.style.display = "";
} else {
  obj.style.display = "";
}

}
}

function showall(id1,id2,id3, id4, id5, id6, id7) {
  var status1 = document.getElementById(id1).style.display; 
  var status2 = document.getElementById(id2).style.display; 
  var status3 = document.getElementById(id3).style.display; 
  var status4 = document.getElementById(id4).style.display;
  var status5 = document.getElementById(id5).style.display;
  var status6 = document.getElementById(id6).style.display;
  var status7 = document.getElementById(id7).style.display; 
  if ((status1 == 'none') || (status2 == 'none') || (status3 = 'none') || (status4 = 'none') || (status5 = 'none') || (status6 = 'none') || (status7 == 'none')) {
show(id1);  show(id2); show(id3); show(id4); show(id5); show(id6);show(id7);      return;
      }
      if ((status1 != 'none') || (status2 != 'none') || (status3 != 'none') || (status4 != 'none') || (status5 != 'none') || (status6 != 'none') || (status7 == 'none')) {show(id1);  show(id2); show(id3); show(id4); show(id5); show(id6);show(id7);     return;
  }
    }
    </script>

What I currently have:

<center>
 <div style="background-color:black; width:80%; cursor:pointer;hand" onClick="showhide('id5'); return(false);"><table width="100%"><tr><td width=80% align=left><font color="white" size="4"><strong>&nbsp;General Airport Information</strong></font></td><td align=right><font color="white" size="1">Click to Expand/Close</font></td></tr></table></div>

    <span id="id5" style="display: none">    

...HIDDEN TEXT...

    </span>
  </center>
<br>

What I want:

<center>
 <div style="background-color:black; width:80%; cursor:pointer;hand" onClick="showhide('id6'); displayMap(); return(false);"><table width="100%"><tr><td width=80% align=left><font color="white" size="4"><strong>&nbsp;Airport Maps</strong></font></td><td align=right><font color="white" size="1">Click to Expand/Close</font></td></tr></table></div>

    <span id="id6" style="display: none">    

<center>
 <div style="background-color:black; width:80%; cursor:pointer;hand" onClick="showhide('id7'); displayMap(); return(false);"><table width="100%"><tr><td width=80% align=left><font color="white" size="4"><strong>&nbsp;Airport Maps hiddent toolbar</strong></font></td><td align=right><font color="white" size="1">Click to Expand/Close</font></td></tr></table></div>

    <span id="id7" style="display: none">  

...HIDDEN TEXT...

    </span>
  </center>


    </span>
  </center>
    <br>

Currently I have created the Inner DIV/SPAN, and I can click the toolbar and it opens, but when I click “SHOW ALL”/”HIDE ALL” It does not work properly.

How do I solve this?

Answer 1

First of all, nesting <div> inside a <span> is not valid HTML. Span is an inline element while div is a block element. Block elements are allowed to contain inline elements, or other blocks, but not vice versa.

If I understand your question correctly, you want to toggle ALL spans or ALL divs.
One easy way to do this would be to get all spans or divs, then loop through each one of them and add display none or block depending on if they already have display:none.

// tagName would be span or div
function toggleAll (tagName) {  
      // Get all divs or spans 
      var elems = document.getElementsByTagName(tagName);

  // Do this for each element
  for (var i = 0; i < elems.length; i += 1) {
     // If elem has display none, show it!
     if (elems[i].style.display === 'none') {
        elems[i].style.display = 'block';
     } else { // .. else hide them
        elems[i].style.display = 'none';
     }
  }    
}

// Call the function
toggleAll('span');