toggle heights of a div

[Diggum1]

Anyone have or seen a script that performs the following...

I have one large image (about 500px height, though it could be anything up to 600px) contained within a <div>. On load, the div's height is set to 200px, so only the top portion of the image can be seen. When a user clicks a button (down arrow for example) it would reveal the entire image (setting the height to 100%). So when you click on the button, it would toggle between the two.

For example it would toggle between:

<div style="height:200px"></div>
<div style="height:100%"></div>

Any ideas,

Thanks
rick

 

[BillyRayPreachersSon]

You should be able to come up from this... Give your div an ID:

<div id="someId" style="height:200px;"></div>

and then use this:

document.getElementById('someId').style.height = '600px';

to set it.

Hope this helps,
Dan

Coedit Limited - Delivering standards compliant, accessible web solutions

[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

 

[BillyRayPreachersSon]

Rick,

Did you resolve this?

Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

 

[Diggum1]

Hi Dan, thanks for the response...was on vacation

I'm using the following, but can't figure out how to roll back the div to the initial height of 100px on the second click.


function showlayer(whichLayer)
{
document.getElementById(whichLayer).style.height = '100%';
}


<a href="#" onclick="showlayer('branson')">Show Image
</a></p>
<div style="height:100px; overflow:hidden" id="branson">
<img src="media/branson.jpg" />
</div>

Rick

 

[cLFlaVA]

just do something like this:

function showlayer(whichLayer)
{
    var d = document.getElementById(whichLayer);
    d.style.height = (d.style.height == '100px') ? '100%' : '100px';
}

*cLFlaVA
----------------------------
[tt]somebody set up us the bomb![/tt]

[URL unfurl="true"]http://www.coryarthus.com/[/url]

 

[Diggum1]

Works great, thanks guys!
(Now I might be pushing it...)

What if I wanted "show image" to swap with "hide image" on click as well?

 

[cLFlaVA]

you could do this one of two ways.

1) the ugly way:

<a href="#" onclick="showlayer('branson'); showimage(); [red]return false;[/red]">

2) the pretty way:

function doThing(l, i) {
    showlayer(l);
    showimage(i);
    return false;
}



<a href="#" onclick="[red]return doThing('branson','other');[/red]">

*cLFlaVA
----------------------------
[tt]somebody set up us the bomb![/tt]

[URL unfurl="true"]http://www.coryarthus.com/[/url]