hide/show nested divs

hi,
how can I hide and show nested divs in <div id=main>  ?
<div id=main>
    <div>...</div>
    <div>...</div>
    <div>...</div>
</div>

Open in new window

uk1900Asked:
Who is Participating?
 
hieloConnect With a Mentor Commented:
see attached code
<script type="text/javascript"><!--
function toggle(i)
{
	var div = document.getElementById(i).getElementsByTagName("div");
	for( var i=0; i < div.length; ++i)
	{
		if( div[i].style.display=='none')
			div[i].style.display=''
		else
			div[i].style.display='none'
	}
}
//--></script>
 
<div id='main'>
    <span onclick="toggle('main')">Toggle Main</span>
    <div>...a</div>
    <div>...b</div>
    <div>...c</div>
 
</div>

Open in new window

0
 
hieloCommented:
try:
<script type="text/javascript"><!--
function toggle(i)
{
	var div = document.getElementById(i);
	if( div.style.display=='none')
		div.style.display=''
	else
		div.style.display='none'
}
//--></script>
<span onclick="toggle('main')">Toggle Main</span>
<div id='main' style='display:none'>
    <div>...a</div>
    <div>...b</div>
    <div>...c</div>
</div>

Open in new window

0
 
MasoudghCommented:
you must set "display" attribute. for example use a function like this:

<script type="text/javascript" language="javascript">
function SwitchVisibility(eID)
{
if (document.getElementById(eID).style.display=="none")
    document.getElementById(eID).style.display="";
else
    document.getElementById(eID).style.display="none";
}
</script>

and for change the display mode for any element you must call the function with id's of your element.
for example :
<div id="MainDiv">
      <div id="Div1" style="display:none">
            11111111111111111111111111111111111111111111111111111111</br>
      </div>
      <div id="Div2" style="display:none">
            22222222222222222222222222222222222222222222222222222222</br>
      </div>
      <div id="Div3" style="display:none">
            33333333333333333333333333333333333333333333333333333333</br>
      </div>
</div>
<span onclick="SwitchVisibility('Div2');">click here</span>
0
Cloud Class® Course: Certified Penetration Testing

This CPTE Certified Penetration Testing Engineer course covers everything you need to know about becoming a Certified Penetration Testing Engineer. Career Path: Professional roles include Ethical Hackers, Security Consultants, System Administrators, and Chief Security Officers.

 
uk1900Author Commented:
thx hielo,
this will hide the main div too, is it possible to show/hide only the nested divs?


<div id='main' style='display:none'>
    <span onclick="ShowHideNested('main')">Toggle Main</span>
    <div>...a</div>
    <div>...b</div>
    <div>...c</div>
</div>

Open in new window

0
 
uk1900Author Commented:
thank you for your help
0
 
hieloCommented:
You are welcome!
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.