Help creating js item in page

[ember]

hello everyone, i need a little help on creating something on a webpage, that inside a table, there is some text, and on the side of it there is a button where you can click to display a little picture that can assist you at understanding the text better. something like the viamichelin.com page, where you can create a travel route, and near the driving directions, there is a button where you can click to display the map of the indicated area. the problem is that i don't know how this can be done. and in this case, the data is static, not like in viamichelin, where it is influenced by the route you create.can anyone help me on this?best regards, ember

[ember]

anyone?

[ember]

well, here are some examples of what i need:here is the section before opening the image:and here it is after opening it:any ideas? best regards, ember

[jesh]

If your map information is inside of a div tag, you can use HTML DOM and CSS to hide/display that div tag when you click on the link. The code could look something like this:HTML

<a style="cursor: pointer;" onclick="ToggleMap();">Click here</a><div id="Map">  <!-- CONTENT GOES HERE --></div>

CSS

#Map { display: none; }

Javascript

var mapobj;function ToggleMap(){	if(!mapobj)	{		mapobj = document.getElementById("Map");	}	if(mapobj.style.display == "block")	{		mapobj.style.display = "none";	}	else	{		mapobj.style.display = "block";	}}

[ember]

thanks, it's working great!just another thing: how can i change the text in the toggle map area so that what the map is closed it says "open" and when the map is open it says close?thanks again for the help!

[jesh]

If you change your link so that it has an ID:

<a id="ToggleMapLink" style="cursor: pointer;" onclick="ToggleMap();">Open</a>

You can change your ToggleMap() function like so:

var mapobj;var maplink;function ToggleMap(){	if(!mapobj)	{		mapobj = document.getElementById("Map");	}	if(!maplink)	{		maplink = document.getElementById("ToggleMapLink");	}	if(mapobj.style.display == "block")	{		mapobj.style.display = "none";		maplink.innerHTML = "Open";	}	else	{		mapobj.style.display = "block";		maplink.innerHTML = "Close";	}}

[jhecht]

It doesnt need to have an ID, it just needs to be called something like this:

var mapobj;var maplink;function ToggleMap(linkName){	if(!mapobj)	{		mapobj = document.getElementById("Map");	}	if(!maplink)	{		maplink = document.getElementById("ToggleMapLink");	}	if(mapobj.style.display == "block")	{		mapobj.style.display = "none";		linkName.value="Open";	  }	else	{		mapobj.style.display = "block";		linkName.value="Close";	  }}//call it like<a href="java script:toggle(this);">Open</a>

[ember]

thanks, it's working perfectly!