jQuery - Displaying text when hidden changes when shown

I have a button that has text on it ... its formatted like so

<a href="" id="refl" class="button"><span>VIEW ALL CASES</span></a>

I have some jQuery at the moment that toggles a div when "refl" is clicked.

How would i ch开发者_开发知识库ange the text VIEW ALL CASES to say "VIEW ALL CASES" when the div is hidden, but display "CLOSE ALL CASES" when the div is showing?

Cheers,

$("#ref1").click(function(){
    var div = $("#theDivToToggle");
    div.toggle();
    $(this).find("span").text(div.is(":visible") ? "CLOSE ALL CASES" : "SHOW ALL CASES");
});

$('.button').click(function() {
  var span = $(this).find('span')
  span.html(span.html() == 'CLOSE ALL CASES' ? 'VIEW ALL CASES' : 'CLOSE ALL CASES');
});

I opt to use .html() instead of .text() because you can have other HTML markup inside your span.

$('a#refl').click(function() {
   //select elements
   var $span = $('span', this);
   var $div = $('div#theOneYouAreHidding'); //this is div you hide/show

   //check text to see if we need to hide or show
   if($span.text() == 'VIEW ALL CASES')
   {
      $div.show();
      $span.text('CLOSE ALL CASES');
   }
   else
   {
      $div.hide();
      $span.text('VIEW ALL CASES');
   }
});

$('#refl').click(function() {

   $(this).text(function() {
       return $('#your-element:visible').length ? 'CLOSE ALL CASES' : 'SHOW ALL CASES';
   });

   // hide code

});

$('a#ref1').toggle(
  function () {
    $('div').show(); // div selector here
    $(this).find('span').html('CLOSE ALL CASES');
  },
  function () {
    $('div').hide(); // div selector here
    $(this).find('span').html('VIEW ALL CASES');
  },
);