jquery dynamic toggle button

Question

Using jQuery, I'm trying to make a quick & dirty way of changing the innerHtml text of a control button (#ctrlBtn) to reflect the state of div's slideToggle() using the html() method. I can't seem to get my head around it. It changes the button text on the 1st click but then that's it... here's the code:

<script type="text/javascript">
      $(document).ready(function(){
        $("#StatsDetail").slideToggle(); //hide it to start
        $("button").click(function(){
          $("#StatsDetail").slideToggle(); //show/hide 
          // the next line is not working even w/standard if/else syntax...
          ($("#ctrlBtn").html!="Hide") ? $("#ctrlBtn").html("Hide") : "#ctrlBtn").html("View"); 
        }); //end-onClick
      }); //end-onLoad
</script>
<span class="right"><button><div id="ctrlBtn">View/Hide Details</div></button></span>
<div id="StatsDetail"> Lorem ipsum yadda yadda blah </div>

ive even tried

if ($("#statsDetail").is(":visible")) {
    $("#ctrlBtn").html("Hide"); 
 } else { 
    $("#ctrlBtn").html("View");
} 

I know I must be missing something really stupid. Any help would be appreciated.

Joe Negron ~ NYC

Answer 1

I'll give this a shot:

var ctrlBtn = $("#ctrlBtn");
var statsDetail = $("#StatsDetail");

statsDetail.hide(); //hide it to start

ctrlBtn.click(function(){
  statsDetail.slideToggle();
  ctrlBtn.text( ((ctrlBtn.text() === 'Hide') ? 'View' : 'Hide') );
});

Thing's you'd want to take note of:

• Always cache your jQuery objects, because creating new ones every time you need to change property is expensive.
• Use hide() when you're trying to hide something. Not only is it mre immediately obvious what you're doing, you also avoid the animation that comes with the sliding effect (alternatively if you do mean to have the animation, then use slideUp())
• Your ternary operator was confusing you. Your brackets are not balanced.
• I would also stop putting the div in the button - it's not valid HTML. Put the id on the button instead, and use display: inline-block

Answer 2

This will do what you want using a callback function once the slide animation is finished:

$("button").click(function() {
    $("#StatsDetail").slideToggle(function() {
        $('#ctrlBtn').text($(this).is(':visible')? 'hide' : 'show');
    });
});

The way it works is by executing the defined callback function once the slideToggle is finished on #StatsDetail. It then checks if #StatsDetail is visible and sets the button text() accordingly.

You can see it in action here.