Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people, just like you, are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
Solved

hide/show nested divs

Posted on 2008-06-14
6
907 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
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.

 
LVL 82

Accepted Solution

by:
hielo earned 500 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: Postgres Monitoring System

A PHP and Perl based system to collect and display usage statistics from PostgreSQL databases.

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

In my daily work (mainly using ASP.net), I need to write a lot of JavaScript code. One of the most repetitive tasks I do are the jQuery Ajax calls. You know: (CODE) I don't know if for you it's the same, but for me is soooo tedious to write the …
In Part 1 (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/A_7849-Hex-Maze.html) we covered the hexagonal maze basics -- how the cells are represented in a JavaScript array and how the maze is displayed.  In this part, we'…
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…

856 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