Hey there, I have a Dynamic Collapsing Box which is toggled by

<div align="right" style="padding-right:25px"><a href="javascript:animatedcollapse.toggle('test1')" >Hide this deal</a></div>

I was wondering how I could make it so that when people click on hide, it changes the text to " Show this deal " and then back to Hide when they click show.

Cheers

http://www.modtalk.co.uk/_site/code/.../text-element/

I should really get around to documenting the code

Originally Posted by chrishirst

http://www.modtalk.co.uk/_site/code/.../text-element/

I should really get around to documenting the code

Thats exactly what I need to do. Except without the <div id="h0" style="visibility:hidden;display:none"> This is normally hidden</div>

So it looks like this

<span id="t0" onclick="toggle('h0',this.id);"><a href="javascript:animatedcollapse.toggle('test1')">Hide this deal</a></span>
<div id="h0" style="visibility:hidden;display:none"></div> 

 
<script type=text/javascript> 
function toggle(id,sender){
	var e = document.getElementById(id).style;
	var t = document.getElementById(sender);
	var disp = e.display;
	var vis = e.visibility;
    var txt = t.innerHTML;
	switch(disp) 
		{
		case 'none':
			disp = 'block';
			vis =  'visible';
            txt = '<a href="javascript:animatedcollapse.toggle(\'test1\')">Show this Deal</a>';
            
			break;
		case 'block':
			disp = 'none';
			vis =  'hidden';
            txt = '<a href="javascript:animatedcollapse.toggle(\'test1\')">Hide this Deal</a>';
			break;
		default:
			disp = 'none';
			vis =  'hidden';
            txt = 'Show';
		}			
	e.display = disp;
	e.visibility = vis;
    t.innerHTML = txt;
 
	}
	
</script>

It doesnt work unless i have <div id="h0" style="visibility:hidden;display:none"></div> there. How do I remove it?

h0 is the ID of the element to hide/show onclick.

Where does the JS class "animatedcollapse" get defined?

<script type="text/javascript" src="animatedcollapse.js"></script>

<script>
<!--
function MM_jumpMenu(targ,selObj,restore){ //v3.0
  eval(targ+".location='"+selObj.options[selObj.selectedIndex].value+"'");
  if (restore) selObj.selectedIndex=0;
}
//-->
</script>
<script type="text/javascript">

animatedcollapse.addDiv('test1', 'fade=1,speed=300,height=360px')
animatedcollapse.init()


</script>

animatedcollapse.js is quite a bit longer.
All I really need is for it to change the link " Hide " to " Show " when clicked. It is working fine, but would be nice to be able to remove the <div id="h0" as it isnt needed

Then simply remove it and any references to it in the script.