Question

I am making a jquery on click event that toggles a css class of div#foo (appending it after the existing class) but also needs to toggle the text of the button on click between show/hide.

<script>
$(document).ready(function(){
  $("button.toggler").click(function(){
    $("#foo").toggleClass("maximize");
    $("button.CsToggle").text(!text == "Expand" ? "Hide" : "Expand");
  });
});
</script>

<div id="foo" class="preExistingClass">
  <div>
    <button class="toggler">Expand</button>
  </div>
</div>

I have the class toggle working properly but not the text toggle. Where did I go wrong?

Answer 1

Use the html() function to set the innerHtml of the button. The selector should also be, $("button.toggler"). Also you need to have a variable text available, I’m assuming your business logic will determine how it is set..

$(document).ready(function(){
  $("button.toggler").click(function(){
    $("#foo").toggleClass("maximize");
    $(this).html($(this).html() == "Expand" ? "Hide" : "Expand");
  });
});

Working Example: http://jsfiddle.net/z5QVM/