Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
?
Solved

hide/show nested divs

Posted on 2008-06-14
6
Medium Priority
?
921 Views
Last Modified: 2010-04-21
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

0
Comment
Question by:uk1900
  • 3
  • 2
6 Comments
 
LVL 82

Expert Comment

by:hielo
ID: 21786013
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
 
LVL 3

Expert Comment

by:Masoudgh
ID: 21786018
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
 

Author Comment

by:uk1900
ID: 21786042
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
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

 
LVL 82

Accepted Solution

by:
hielo earned 2000 total points
ID: 21786097
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
 

Author Closing Comment

by:uk1900
ID: 31467219
thank you for your help
0
 
LVL 82

Expert Comment

by:hielo
ID: 21786169
You are welcome!
0

Featured Post

Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article discusses how to create an extensible mechanism for linked drop downs.
In this blog, we’ll look at how improvements to Percona XtraDB Cluster improved IST performance.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses

578 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question