[Webinar] Streamline your web hosting managementRegister Today

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 188
  • Last Modified:

hiding and showing parts of a page using <DIV>

hi,

i'm designing a webpage with a lot of info on it and i want to hide most of it until somebody clicks a link, then it should expand en show the details

format

...
<a href=# onClick="ShowDiv(1);">link 1</a>
<div name=x1 class=mydivclass>info</div>
<a href=# onClick="ShowDiv(2);">link 2</a>
<div name=x2 class=mydivclass>info</div>
<a href=# onClick="ShowDiv(3);">link 3</a>
<div name=x3 class=mydivclass>info</div>

the info in the divs is initially hidden using document.mydivclass.style.display="none"

how do i
-refer to one specific div, how can i turn a variable into an object (ie divname="SuchAndSo" and then i want to set properties in the way of document.divname.property etc)

- make this div visible
0
heit
Asked:
heit
  • 2
  • 2
1 Solution
 
xabiCommented:
Hi there:

You must use this code:

<script LANGUAGE="javascript">
<!--
var ns = (document.layers)? true:false;
var ie = (document.all)? true:false;
function show(id) {
  if (ns) document.layers[id].visibility = "show"
      else if (ie) document.all[id].style.visibility = "visible"
}
function hide(id) {
  if (ns) document.layers[id].visibility = "hide"
      else if (ie) document.all[id].style.visibility = "hidden"
}
//-->
</script>


and declare ths divs this way:

<style TYPE="text/css">
<!--
#menu1layerDIV {position:absolute; left:1; top:140; visibility:hidden;}-->
</style>
<body>
<div id="menu0layerDIV">
..
..
</div>
..
..

If you want to hide it just do this:
 hide("menu0layerDIV")
and if you want to show it:
 show("menu0layerDIV")
 

Now if you wanto to convert a variable into an object just do this:

divname="SuchAndSo"
eval("document." + divname + ".property = fooo")

xabi
0
 
heitAuthor Commented:
xabi, code works fine, thanx!

i've increased the points because i have an additional question:

i can't use the absolute positioning because i don't know how much text should be above the div ... what i would like to do is design it in a way that it really pops up between the lines, so that first i've got a lot of text, then i press a link and then the text separates and a div show in between. Now i use relative divs, but when it is invisible it still takes the place between the lines, only the divtext is hidden.

Do you know how to solve this?

i use ie 4.0
0
 
xabiCommented:
Here goes the IE code:

--------- 8< -------- 8< ----
<html>
<head>
<title>Example</title>
<script LANGUAGE="javascript">
//-->
function clikker(a) {
  if (a.style.display =='') a.style.display = 'none'
  else a.style.display=''
}
//-->
</script>


</head>
<body marginheight="0" marginwidth="0" topmargin="0" leftmargin="0">
text<br>
text<br>
<a href="javascript:clikker(menu)">click</a><br>
end of text--------------<br>
<div <div ID="menu" STYLE="DISPLAY: none" >
ini ------<br>
dfghfgh<br>
end ----
</div>
continue---------------<br>
sfdgsdfgsdfgsdfgsdfg
</body>
</html>
--------- 8< ------ 8< ------

xabi

PS: Only IE
0
 
heitAuthor Commented:
great, it works just fine!
0

Featured Post

Take Control of Web Hosting For Your Clients

As a web developer or IT admin, successfully managing multiple client accounts can be challenging. In this webinar we will look at the tools provided by Media Temple and Plesk to make managing your clients’ hosting easier.

  • 2
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now