PDA

View Full Version : how do you do dynamically show and hide block elements in HTML? [renamed]


Sammo
December 20th, 2004, 04:11 PM
on kirupaforum's homepage. The black arrows at the right hand side of a forum title. You click it and it hides data (and changes the images) clicking it again resets it.

How do you do that...I'm guessing in javascript?
ironikart
December 20th, 2004, 10:09 PM
You can use some fairly simple DHTML to hide < DIV > tags by id:

JS API Code:


function getObject(obj){
var theObj
// Netscape Navigator 4+
if (document.layers)
{
if (typeof obj == "string")
{
// One layer deep
return document.layers[obj]
} else {
// Nested layer
return obj
}
}
// Internet Explorer 4+
if (document.all)
{
if (typeof obj == "string")
{
return document.all(obj).style
} else {
return obj.style
}
}
// DOM Browers (firefox, safari, Opera)
if (document.getElementById)
{
if (typeof obj == "string")
{
return document.getElementByID.style
} else {
return obj.style
}
}
return null;
}

function display(obj)
{
var theObj = getObject(obj)
theObj.display = "block"
}

function cinch(obj)
{
var theObj = getObject(obj)
theObj.display = "none"
}


cinch() hides, display() shows.

Just call those functions on your buttons and you can manipulate the contents of the tags by id.
Sammo
December 21st, 2004, 03:44 PM
ok. thanks :)

But how would I write the HTML?

I'm not sure how to make the display image change to the cinch when clicked
Sammo
December 22nd, 2004, 06:38 AM
ok
so i have:


<div id="???">Blah Blah Blah </div>

<!-- Later on in the document -->
<a href="#" onClick="cinch()">Close</a>

What id tag should I use, and how will I change the:

<a href="#" onClick="cinch()">Close</a>
to

<a href="#" onClick="display()">Open</a>
???
Sammo
December 24th, 2004, 03:59 PM
dammit doesn't anyone know?
lostinbeta
December 24th, 2004, 04:09 PM
The functions cinch() and display() accept an argument.

cinch('myDIV') will hide the div tag with the ID 'myDIV' while display('myDIV') will show the div with the ID 'myDIV'.
Sammo
December 24th, 2004, 04:44 PM
ok thanks :D

How about the two links swapping when clicked?
lostinbeta
December 24th, 2004, 04:49 PM
Sort of the same functions, but changing the innerHTML property value of the selected DIV tag insteady of the display property value.
Sammo
December 24th, 2004, 05:01 PM
didn't understand that.. sorry :(

could you reiterate?
lostinbeta
December 24th, 2004, 05:12 PM
The function to change the content of a DIV instead of hiding it would basically be the same as the functions above, but instead of

theObj.display = "block";

you would use something like...

theObj.innerHTML = "html code here";
Sammo
December 26th, 2004, 06:16 PM
<html>
<head>
<style type="text/css">
.right {
float: right;
}
</style>
<script type="text/javascript">
function getObject(obj){
var theObj
// Netscape Navigator 4+
if (document.layers)
{
if (typeof obj == "string")
{
// One layer deep
return document.layers[obj]
} else {
// Nested layer
return obj
}
}
// Internet Explorer 4+
if (document.all)
{
if (typeof obj == "string")
{
return document.all(obj).style
} else {
return obj.style
}
}
// DOM Browers (firefox, safari, Opera)
if (document.getElementById)
{
if (typeof obj == "string")
{
return document.getElementByID.style
} else {
return obj.style
}
}
return null;
}

function display(obj)
{
var theObj = getObject(obj)
theObj.display = "block"
theObj.innerHTML = "<a href=\"#\" onClick\"cinch(MyDiv)\" class\"right\">Close</a>"
}

function cinch(obj)
{
var theObj = getObject(obj)
theObj.display = "none"
theObj.innerHTML = "<a href=\"#\" onClick\"display(MyDiv)\" class\"right\">Open</a>"
}
</script>
</head>

<body>
<div id="MyDiv"> Hello World </div>
</body>
</html>


Would that be correct?