Question

I am trying to create a slideToggle effect in JQuery.
I have a div which is positioned as:

someDiv {
   position : absolute;
   bottom : 100px; 
}

Now when the function ( $("#someDiv").slideToggle(); ) is triggered on click, the div slides UP from bottom rather than showing or dropping down.

I want it to drop normally form TOP while it is positioned as above. How do I do that? I have read that positioning from bottom gives it that effect but could not find a solution anywhere.

Any help would be really appreciated.

Answer 1

You can use a function in combination with the window resize event to dynamically position the div 100px from the bottom using the CSS top property so that the slideToggle() acts the way you want like this:

CSS

#theDiv {
  position : absolute;
}​

HTML

<button>Toggle</button>
<div id="theDiv">...<div>​

JS

// Positions Div From Bottom //
function positionDiv($target, fromBottom){
    $target.css({
        top: $(window).height() - fromBottom
    });
}

// Bind positionDiv() to Window Resize and Trigger at Start //
$(window).resize(function(){
    positionDiv($('#theDiv'), 100);
}).trigger('resize');

// Bind Toggle to Button //
$('button').on('click', function(){
    $('#theDiv').slideToggle();
});​

DEMO HERE

I hope this helps!