Question

So I’ve got a DIV (a map) that goes across the width of the page, but i’d like to have a button users can click to “Hide/Unhide” the DIV that will basically do three things when clicked:

1. scale the vertical height of the div to 25% of the original height…
2. Change the DIV to have opacity .3 so its faded when at its reduced height…
3. Revert back to normal height & opacity (1) when clicked again

Here’s what I’ve got so far: Currently it only scales down to the correct vertical height

Really appreciate the help…

<!-- JQUERY STUFF ADDED IN THE HEAD-->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>

<!-- THE CODE -->
<div id="map">
    Map Content Is Here
</div>

<p class="hidemap">HIDE MAP</p>

<script>
  $(document).ready(function() {
  $("p.hidemap").click(function () {
    $("#map").effect("scale", { percent: 25, direction: 'vertical' }, 500);
    });

   });
</script>

Answer 1

Try something like this:

var orig_height = $('#map').height();

$('.hidemap').click(function()
{
    if($('#map').height() == orig_height)
    {
        var new_height = Math.floor(orig_height * .25) + 'px';
        var new_opacity = '.3';
    }
    else
    {
        var new_height = orig_height + 'px';
        var new_opacity = '1';
    }
    $('#map').animate(
    {
        height: new_height,
        opacity: new_opacity
    },1000);
});

Working example: http://jsfiddle.net/X4NaV/