Jump to content

Help collapsing divs


Darkmatter5

Recommended Posts

Here's my code that works, but isn't doing quite what I'm wanting.

 

function helpcontents(divid){   
  if(document.getElementById(divid).style.display == 'none'){ document.getElementById(divid).style.display = 'block'; }
  else{ document.getElementById(divid).style.display = 'none'; }
}

 

Here's the HTMl code

<a href="javascript:;" onmousedown="helpcontents('G1')">General site introduction</a>
<a href="javascript:;" onmousedown="helpcontents('A1')">Admin introduction</a>

<div id="G1" style="display: block;">
  <span class="help_title_text">General</span>
  <p>
  Welcome to V.E.I.N. or Video Entertainment Interactive Network!
</div>
<div id="A1" style="display: none;">
  <span class="help_title_text">Administrative</span>
  <p>
  As an administrator of V.E.I.N. you will be expected to provide a good example of the sites standards.
</div>

 

I'm wanting all divs to collapse except for the div name passed to the function.  How can I do that?

Link to comment
https://forums.phpfreaks.com/topic/151237-help-collapsing-divs/
Share on other sites

Put all the help divs within a container div and use the function below

<html>
<head>
<script type="text/javascript">

var divList = new Array();

function helpcontents(divid)
{
  helpDivs = document.getElementById('helpDivList');
//  alert(helpDivs.childNodes.length);

  for (var i=0; i<helpDivs.childNodes.length; i++)
  {
    if(helpDivs.childNodes[i].id)
    {
      helpDivs.childNodes[i].style.display = (helpDivs.childNodes[i].id==divid) ? 'block' : 'none';
    }
  }

}

</script>

</head>
<body>

<a href="javascript:;" onmousedown="helpcontents('G1')">General site introduction</a>
<a href="javascript:;" onmousedown="helpcontents('A1')">Admin introduction</a>

<div id="helpDivList">
  <div id="G1" style="display: block;">
    <span class="help_title_text">General</span>
    <p>
    Welcome to V.E.I.N. or Video Entertainment Interactive Network!
  </div>
  <div id="A1" style="display: none;">
    <span class="help_title_text">Administrative</span>
    <p>
    As an administrator of V.E.I.N. you will be expected to provide a good example of the sites standards.
  </div>
</div>

</body>
</html>

Link to comment
https://forums.phpfreaks.com/topic/151237-help-collapsing-divs/#findComment-794738
Share on other sites

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.