Question

I have tried to make an anchor change it’s text when you click on it. But instead of toggling it just goes invisible and doesn’t work.

here’s the code:

$('a#button').click(function(e) {
    e.preventDefault();
    findListingBoxList.slideToggle('200');

    $(this).toggle(function() {
        $(this).html('Hide All');
    }, function() {
        $(this).html('Show All');
    });
});

HTML:

<a id="button" href="#"></a>
<div id="ListingBox">

        <ul id="furniture">
            <li>Beds</li>
            <li>Chairs</li>
            <li>Tables</li>
            <li>Desks</li>
            <li>Shelves</li>
            <li>Cabinet</li>
            <li>Miscellaneous</li>
        </ul>

        <ul id="games">
            <li>PC</li>
            <li>Mac</li>
            <li>XBOX 360</li>
            <li>Playstation 3</li>
            <li>Nintendo Wii</li>
            <li>PS Vita</li>
            <li>Playstation 2</li>
            <li>Playstation</li>
            <li>Super Nintendo</li>
            <li>Nintendo DS</li>
            <li>Miscellaneous</li>
        </ul>
</div>

I have already tried it with .html and .text.

Answer 1

.toggle() event is deprecated since 1.8

HTML :

<a href="#" id="button" class="hide_all">Hide ALL</a>

<div id="find">
  <p>Here is some content</p>
  <p>Here is some content</p>
</div>

JS :

var findListingBoxList = $('#find');

var labels = {
  hide: 'Hide ALL',
  show: 'Show ALL'
};

$('#button').click(function(e){

  e.preventDefault();
  if($(this).text() == labels.show) {
    $(this).text(labels.hide);
    findListingBoxList.slideDown();
  } else {
    $(this).text(labels.show);
    findListingBoxList.slideUp();
  }
})

Using slideDown/slideUp permit the link to work regardless its starting status (you could load the page with a Show ALL or a Hide ALL state.)

Look at this for a demo : http://codepen.io/ByScripts/pen/mbekK