CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Tauseef
Tauseef

Reputation: 43

Change jQuery element toggle

I have this example with a div which show / hide from the top, but I need it from the bottom to the top, I was trying to change some code, but I couldn't, and I didn't find any example.

<script type="text/javascript">
$(document).ready(function(){
    $(".btn-slide").click(function(){
        $("#panel").slideToggle("slow");
        $(this).toggleClass("active"); return false;
    });
});
</script>

Slide Panel

<div id="panel">
    <!-- you can put content here -->
</div>

Upvotes: 1

Views: 280

Answers (3)

Janice D&#39;Santos
Janice D&#39;Santos

Reputation: 26

You can also use the animate effect(http://api.jquery.com/animate/) and change the height of the div.

$(document).ready(function(){
$(".btn-slide").click(function(){
if($('#panel1').height=='0')
$("#panel1").animate({height:"140px"},{duration:1000});
else
$("#panel1").animate({height:"0px"},{duration:1000});

    });
});

this will act as a toggle as well as amimate from bottom

Upvotes: 1

Sunil Soundarapandian
Sunil Soundarapandian

Reputation: 158

You might want to use animate option in jquery, here is the code

HTML

<button class="btn-slide">Some Text</button>
<div id="box">
<div id="panel">Sample Text here<br/> Sample Text here<br/>Sample Text here</div>
</div>

CSS

#box
{
height: 100px;
width:200px;
position:relative;
border: 1px solid #000;
}
#panel
{
position:absolute;
bottom:0px;
width:200px;
height:20px;
border: 1px solid red;
display:none;
}

JQUERY

var panelH = $('#box').innerHeight();
$(".btn-slide").click(function(){
$("#panel").stop(1).show().height(0).animate({height: panelH},500);
});
});

Upvotes: 0

viclim
viclim

Reputation: 959

You probably want to use slide effect provided by the jQuery UI. It allows you to define the direction as well.

Upvotes: 0

Related Questions