...

View Full Version : Toggle Div Visibility via Linked Image



JohnSlider
03-15-2012, 07:37 PM
http://z4.ifrm.com/30081/169/0/f5253495/headermenu_02.gif

I have that image at the top of my website. What I want to do is have it be a link that toggles a div somewhere else on the board.

I have been using this code:

<input type="checkbox" name="thebox" onclick="javascript:toggleDiv('block');">Toggle Block
<div id="searchbock">*search form here, obviously*</div>

<script language="javascript">
function toggleDiv(id)
{
var div = document.getElementById(id);
var current = div.style.display;

if (current == 'none')
div.style.display = 'block';
else
div.style.display = 'none';
}
</script>

But the checkbox is rather ugly and I would much rather use my custom image. Thoughts?

DaveyErwin
03-15-2012, 07:46 PM
<div id="searchbock">*search form here, obviously*</div>
<img onclick="toggleDiv('searchbock')" src="http://z4.ifrm.com/30081/169/0/f5253495/headermenu_02.gif">
<script language="javascript">
function toggleDiv(id)
{
var div = document.getElementById(id);
var current = div.style.display;

if (current == 'none')
div.style.display = 'block';
else
div.style.display = 'none';
}
</script>

JohnSlider
03-15-2012, 09:02 PM
That's pretty much exactly what I wanted with the small exception being that in my previous code, the div block was initially hidden and clicking showed it, while with this code the process is reversed. Can that be fixed?

webdev1958
03-16-2012, 01:19 AM
var current = div.style.display;



You can't use the style property to "read" style values from the stylesheet. The style property only assigns an inline style. On the first click, nothing happens as expected. After the inline style has been assigned then you can "read" the inline style value if you needed to.

To get around that, I would do something like this:



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title></title>
<style type="text/css">
#searchbock {display: none;}
</style>
</head>
<body>
<div id="searchbock">*search form here, obviously*</div>
<img onclick="toggleDiv()" src="num1.jpg" id="img1" />
<script type="text/javascript">
var showHideDivO = document.getElementById('searchbock');
var status = getDisplayStatus(showHideDivO);
function toggleDiv(){
status = (status == 'none')? 'block':'none';
showHideDivO.style.display = status;
}
function getDisplayStatus(elem){
try{
var status = getComputedStyle(elem, '').getPropertyValue('display');
} catch(e){
var status = elem.currentStyle.display;
}
return status
}
</script>
</body>
</html>

JohnSlider
03-16-2012, 03:04 AM
That worked perfectly. Thank you so much. :o

JohnSlider
03-17-2012, 04:49 PM
Hi fellas,

Sorry to bother you again, but is there a way to make it so that the content inside the toggle div does not load until it is triggered to show? Some of my members are complaining that the new additions are slowing down their browsing speed, and I assume it is because it is loading the content on every page refresh rather than only when the show trigger is clicked.

webdev1958
03-18-2012, 12:21 AM
but is there a way to make it so that the content inside the toggle div does not load until it is triggered to show?

Post the code inside the toggle <div>



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum