JavaScript Forum

**shaoen01** · 08-08-2006, 06:31 AM

Hi,

I am trying to change the values of <div> tags after i click on a particular link. For example, when i click on "More" link, i would like the the code to be "style="DISPLAY: None" from "style="DISPLAY: block".

I am not sure if i made any sense but is it possible to do this using javascript?

Thanks

**funkdaddu** · 08-08-2006, 10:53 AM

Yes it is. Here is a simple page to demonstrate.

HTML Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

	<head>
		<meta http-equiv="content-type" content="text/html;charset=iso-8859-1">
		<title>Untitled Page</title>
		<style type="text/css" media="screen"><!--
#myBox {
	background-color: #eee;
	display: block;
	padding: 5px;
	float: left;
	border: solid 1px #000040
	}

--></style>
		<script type="text/javascript"><!--
function hideBox(boxName) {
	document.getElementById(boxName).style.display='none';
}
//-->
</script>
	</head>

	<body bgcolor="#ffffff">
		<p><a href="link.html" onclick="hideBox('myBox'); return false;">More</a></p>
		<div id="myBox">This is a box.</div>
	</body>

</html>

**shaoen01** · 08-08-2006, 03:59 PM

Hi,

Thanks for the code, i will try it out and if i encounter any problems i will post back again! But at a glance, I understand what you're doing. Thanks

**shaoen01** · 08-08-2006, 04:17 PM

Just wondering, if i can use <div> tags in between <tr> and make it work? Because when my page first load, i do not want a certain section to be shown. When the "more" button is clicked, then the section that was hidden initially will be displayed.

Quote:

<table>
<tr>
<td>
Show me please ...
<a href="#" id="show all" onclick="showBox('myBox')">View All</a>
</td>
<td>
<div id="mybox">
Don't show me ...
</td>
<td>
Don't show me too ...</div>
</td>
</tr>
</table>

Do you think the above code will work?

**funkdaddu** · 08-08-2006, 09:55 PM

You can't put anything in between table cells or rows. You can either, not use tables, or just give your row or cell the ID:

Code:

			<tr id="myBox">
				<td>This is a box.</td>
			</tr>

**shaoen01** · 05:43 AM

If i use this code:

Code:

<tr id="myBox">
				<td>This is a box.</td>
			</tr>

Will i be able to change the value of the "id" by using javascript? Maybe instead of using "myBox" i can change it to "thatBox" instead? Will the javascript above still be applicable? How does it know which column to change the id from "myBox" to "thatBox"?

Thanks

**funkdaddu** · 08-09-2006, 09:53 AM

You can change the ID to whatever you like, it's just a name for an object. I just used myBox as an example. Just make sure you change the onclick's call to the function, as it's passing the name to the function, so it knows what to hide:

Code:

 hideBox('thatBox');

**shaoen01** · 08-09-2006, 10:56 AM

Hi,

Actually what i am trying to say is that can i change the id of td? For example, i have 2 CSS style one called hideBox and showBox. So as the name indicates, one is basically to hide and show a box.

So maybe when the web page is loaded, "<td id='showBox'>" but after a click on a button i want "td" to use hideBox instead. Which means i want it to become like this - "<td id='showBox'>". Am i able to do this using javascript?

I tried using "documents.getElementById('showBox')" in hope of getting that <td> but could not. I also tried doing "documents.getElementsByTag('td')", but it does not work too.

Any suggestions?

**funkdaddu** · 03:42 PM

You don't need to change the ID of the object. Make showBox and hideBox classes, then just change the classname of the object. The ID should stay the same so you can always reference it with the same string. So, are you trying to toggle (not just hide or show it once) the visibility of the TD? Like this:

HTML Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

	<head>
		<meta http-equiv="content-type" content="text/html;charset=iso-8859-1">
		<title>Untitled Page</title>
		<style type="text/css" media="screen"><!--
.boxVisible {
	background-color: #eee;
	display: block;
	padding: 5px;
	float: left;
	border: solid 1px #000040
	}

.boxHidden {
	display: none;
}
--></style>
		<script type="text/javascript"><!--
function showHide(boxName) {
	//set the object to a variable, so we can simplfy the code
	theBox = document.getElementById(boxName);
	//if the class equals our visible code, set the class to the hidden box style, else set the class to the visible box style
	if (theBox.className == "boxVisible") {
		theBox.className = "boxHidden";
	} else {
		theBox.className = "boxVisible";
	}
}
//-->
</script>
	</head>

	<body bgcolor="#ffffff">
		<p><a href="link.html" onclick="showHide('anyNameYouCanThinkOf'); return false;">More</a></p>
		<table>
			<tr>
				<!-- Note that you can call your ID anything, as you can change the style via the class, the ID stays the same -->
				<td id="anyNameYouCanThinkOf" class="boxVisible">This is a box.</td>
			</tr>
		</table>
	</body>

</html>