Change div text on resize of box (jQuery) - php

Question

I'm currently using jQuery to animate the resizing of a banner.
There's a div button that does this upon clicking.
What I'm trying to do is get the button to change its text from "hide banner" to "show banner" depending
<div id="banner_animate" class="banner">
<div id="minimize" class="small_button">hide banner</div>
<script>
$("#minimize").click(function() {
var new_height = 200;
if ($("#banner_animate").height() == 200) new_height = 40;
$("#banner_animate").animate({
height: new_height + "px"
}, 500 );
});
$(function() {
$( document ).tooltip();
});
</script>
I'm pretty new to jQuery, so any help would be greatly appreciated!

Answer 1

in your $("#minimize").click you can use $(this).text():
$("#minimize").click(function() {
if ($(this).text() == 'hide banner') {
$("#banner_animate").animate({height: "40px"}, 500);
$(this).text('show banner');
} else {
$("#banner_animate").animate({height: "200px"}, 500);
$(this).text('hide banner');
}
});
http://api.jquery.com/text/

Answer 2

Try this:
$("#minimize").click(function () {
var new_height = 200;
if ($("#banner_animate").height() == 200) new_height = 40;
$("#banner_animate").animate({
height: new_height + "px"
}, 500);
$(this).text(function (_, oldText) {
return oldText === 'Hide banner' ? 'Show banner' : 'Hide banner';
});
});
Also, change the HTML to show banner at first like:
<div id="minimize" class="small_button">Show banner</div>
FIDDLE DEMO

Answer 3

$("#minimize").click(function() {
if($(this).html()=="hide banner"){
$(this).html("show");
}
else {
$(this).html("hide banner");
}
var new_height = 200;
if ($("#banner_animate").height() == 200) new_height = 40;
$("#banner_animate").animate({
height: new_height + "px"
}, 500 );
});
$(function() {
$( document ).tooltip();
});
Fiddle Demo