Jump to content

adapting toggle script

dazz_club

By dazz_club
in JavaScript

Recommended Posts

dazz_club Newbie

dazz_club

Posted
Posted

Hi,ive got a problem, that i think the javascript "toggle" could hopefully sort out.ive got a page that displays several products and its details (server side language, coldfusion). However, i would like to give the user the option to view product info if they want, so in fact its hiding alot of spec details.you can see hereThe red box is the part i want to be able to open and close (this box will contain quite alot of data)i found the toggle script , that in theory could work but ive never touched js at all, so i wouldnt know where to start. i think the probelm could be that the script uses the div's id to toggle on and off. but if i use this wouldnt it just control all of them rather than them being indepent of eachother? Would i need to pass some sort of cftag at all?here is the toggle script i found-------------------------------------<script>function toggle(){ var div1 = document.getElementById('div1') if (div1.style.display == 'none') { div1.style.display = 'block' } else { div1.style.display = 'none' }}</script>------------------------------------if you visit this site, and click on more/less under the job descriptions, that is what im trying or wanting to achieve.any help would be great.cheersDarren.

Link to comment
Share on other sites
jeffman w3schools Guru

jeffman

Posted
Posted

Try this:

<script>	 function toggle(theDiv){		if (theDiv.style.display == 'none') {		   theDiv.style.display = 'block';		} else {		   theDiv.style.display = 'none';	 }  }  </script>  ------<a href="#" onclick = "toggle(div_0)">More</a><div id="div_0" style="display:none">Content</div>

EDIT: Whoo! Weird upload problems.EDIT 2: Look again. First version only does half the job. Now it works. Ugly, but it works.

Link to comment
Share on other sites
aspnetguy Sacred Member

aspnetguy

Posted
Posted

if you made your boxes like this

<div style="height:auto;width:auto;background-color:red;">	<div rel="toggle" style="display:none">		<table class="lables">			<tr style="text-align:left;">				<td> </td>				<td style="font-weight:bold;">°C</td>				<td style="font-weight:bold;">°F</td>			</tr>			<tr>				<td><span style="font-weight:bold;"></span></td>				<td></td>				<td></td>			</tr>		</table>	</div>	<div><a href="java script:toggle(this)">More</a></div></div>

you could use this script

function toggle(link) {	//get toggle box	var box = link.parentNode.getElementsByTagName('div')[0];		//is open	if(link.innerHTML == 'More') {		link.innerHTML = 'Less';		box.style.disply = 'block';	}	//is closed	else {		link.innerHTML = 'More';		box.style.disply = 'none';	}}

Link to comment
Share on other sites
Jesdisciple Invested Member

Jesdisciple

Posted
Posted

EDIT: Woops. It looks like he did better than I. :)I normally don't help folks who haven't tried yet, but you seem like you honestly have no clue. Please read through the JS tutorial and attempt to solve your next problem before asking for help.The digit in each ID is to keep the IDs unique. You should put the CSS and JS in separate files to deploy the page. And test this before using it because I didn't.

<html>	<head>		<title></title>		<style type="text/css">			div.toggle{				display: none;			}		</style>		<script type="text/javascript">			function toggle(id){				var div = document.getElementById(id);				var link = document.getElementById(id + '_link');				if (div.style.display == 'none') {					div.style.display = 'block';					link.innerHTML = '(Less)';				} else {					div.style.display = 'none';					link.innerHTML = '(More)';				}			}		</script>	</head>	<body>		<a href="java script: toggle('div0');" id="div0_link">(More)</a><div id="div0" class="toggle">Blah!</div>	</body></html>

Link to comment
Share on other sites
Skemcin Devoted Member

Skemcin

Posted
Posted

Darren,The toggle script uniquely identifies each div so it will treat them exclusive from one another. So, if you start a counter to increment with each row of your output, you can simply use that variable as your div's id.I'll post an example here in a minute . . . . (I see aspnetguy is lurking here too so I"m wondering what he is typing while I am typing)...Assuming that you have toggle.js in place without any modifications, here is how your code could function:

<cfset thisDIV = 0><cfoutput query="tmax" group="productName"><cfset thisDIV = thisDIV + 1><b>#productName#</b><br /><img src="images/thermaxIMG/#productIMG#" title="" alt="" /><br /><a href="java script:void(0);" onclick="expandcontent('grp#thisDIV#');" title="See More Product Information">[learn more]</a><br /><div id="grp#thisDIV#" style="display:none;">	<cfoutput>	<div style="height:auto;width:auto;background-color:red;">	#range#<br />	</div>	</cfoutput></div><hr><br /></cfoutput>

This should do the trick.

Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

Go to topic listing
×
×
  • Create New...