hide/show div script when onclick picture or text

**fritsieboy** · 07-06-2009, 09:40 AM

Hi there,

I am looking for a show/hide script. I have found a lot of scripts but I am looking for one where not only a text link, but a picture as well is clickable.

The picture should change when clicked down, for example an arrow pointing down when the div is hidden en pointing up when the div is showed.

Can you help me?

Thanks!

**TheBearMay** · 07-06-2009, 10:07 AM

Off the top of my head:

HTML Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
	<title>Test</title>
	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/javascript" id="myscript" >

function showHide(divID, imgID){
	if (document.getElementById(divID).style.display == "none") {
		document.getElementById(divID).style.display = "block";
		document.getElementById(imgID).src = "Images/upArrow.gif";
	} else {
		document.getElementById(divID).style.display = "none";
		document.getElementById(imgID).src = "Images/dnArrow.gif";
	}
}

</script> 
<style type="text/css">

</style>
</head>

<body>
<img id="dirImg" src="Images/upArrow.gif" onclick="showHide('hideDiv',this.id)" />
<div id="hideDiv" >
	Some Text
	<a href="#" onclick="showHide('hideDiv','dirImg')">Hide this DIV</a>
</div>

</body>
</html>

**JMRKER** · 07-06-2009, 10:12 AM

Do you have some code already?

If so, add this to where it would apply:

Code:

<html>
<head>
<title>Toggle Image</title>
<script type="text/javascript">
// From: http://www.webdeveloper.com/forum/showthread.php?t=212527

function toggle(info) {
  var sel = document.getElementById(info.id);
  if (sel.alt == 'arrow up') {
	  sel.src = '';
	  sel.alt = 'arrow down';
  } else {
	  sel.src = '';
	  sel.alt = 'arrow up';
  }
}
</script>
</head>
<body>
<img id="arrowDirection" src='' alt='arrow down' onclick="toggle(this)">
</body>
</html>

Put your image URL into the proper src='' positions.

**fritsieboy** · 07-06-2009, 10:18 AM

hey bear thanks for your reply.

I only have 2 questions if I may;

-I would like to place text next to the image, so that the text as well as the image is clickable to show the div
-How do I change the code so that by default the hidden div is not showing?

thanks!

**bluestartech** · 07-06-2009, 10:22 AM

include the whole lot (img and text) in one div

**TheBearMay** · 07-06-2009, 10:38 AM

No changes to the JS, and just a couple to the HTML:

HTML Code:

<a href="#" onclick="showHide('hideDiv','dirImg')"><img id="dirImg" src="Images/dnArrow.gif" onclick="showHide('hideDiv',this.id)" style="text-decoration:none;border:none;"/>Click here</a>
<div id="hideDiv" style="display:none">
	Some Text
	<a href="#" onclick="showHide('hideDiv','dirImg')">Hide this DIV</a>
</div>

The onclick for the image is optional as it is part of the <a> element, but....

**fritsieboy** · 07-06-2009, 10:52 AM

GREAT! thanks dude!

**charlesdanger** · 06-13-2012, 10:39 AM

Is it possible to do this with 2 different images and 2 different text options I have been trying to work my way through it for a couple days

**kevhouston740** · 06-14-2012, 01:33 PM

Sometimes you may want to hide several things and show one.

Here is a script I use to hide everything and then show the one thing I want to display. So whether it is hide 1 and show 1 or hide many and show 1 this should work. One thing I like to do is to set all the div names into a variable and have it in the link like this:

*Example is in ColdFusion....

<CFSET Hide = Program, Author, Date, Comments, Title, Location>

<CFOUTPUT>
<a id="displayText" href="javascript:HideNShow('#Hide#', 'Title');">Edit Title</a>
</CFOUTPUT>
or you can list it out like this:

<a id="displayText" href="javascript:HideNShow('Program, Author, Date, Comments, Title, Location', 'Title');">Edit Title</a>

here is the JavaScript function:

function HideNShow (HideThese, ShowThis)
{
var temp = (HideThese);
var temparray = new Array();
temparray = temp.split(', ');
var arLen=temparray.length;
for ( var i=0, len=arLen; i<len; ++i ){
var ele = document.getElementById(temparray[i]);
ele.style.display = "none";
}
document.getElementById(ShowThis).style.display='block';
}

Thread: hide/show div script when onclick picture or text

Thread Tools

Display

hide/show div script when onclick picture or text

Thread Information

Users Browsing this Thread

Bookmarks

Bookmarks

Posting Permissions