Toggle with text in jQuery?

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.

Where is findListingBoxList defined? This version of toggle is deprecated, and removed in 1.9 ! — adeneo
– adeneo, Commented Jan 29, 2013 at 13:56
Strike that, the docs says deprecated, but does'nt look like it's removed, should still consider doing this another way. — adeneo
– adeneo, Commented Jan 29, 2013 at 14:03

Ram · Accepted Answer · 2013-01-29 14:08:43Z

4

toggle event method is deprecated, you can use text method callback function, note that by 200ms slideToggle is executed too fast.

$('#button').click(function(e) {
    e.preventDefault();
    findListingBoxList.slideToggle(600);   
    $(this).text(function(i, currentText){
       return currentText === 'Show All' ? 'Hide All' : 'Show All';
    })
});

edited Jan 29, 2013 at 14:08

answered Jan 29, 2013 at 14:03

Ram

145k16 gold badges174 silver badges201 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Jake Snake Over a year ago

I tried to copy paste this in there and work around with it but it didnt work though.

Mark Schultheiss Over a year ago

@user2021893 this worked for me if I used: $('#ListingBox ul').slideToggle(600); so it must be your definition of findListingBoxList - whereever that is that is at fault here.

Ja͢ck · Accepted Answer · 2013-01-29 15:14:25Z

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

edited Jan 29, 2013 at 15:14

Ja͢ck

174k39 gold badges269 silver badges317 bronze badges

answered Jan 29, 2013 at 13:58

Byscripts

2,5882 gold badges19 silver badges25 bronze badges

4 Comments

Ja͢ck Over a year ago

No. toggle() runs a function on mouseenter and mouseout respectively.

Byscripts Over a year ago

My bad. Not the first I'm f*cked by the jQuery doc :/ And using the same method for two completly different behavior is a misconception to me... Nevertheless, the proposed solution is working. (and like said by @undefined, this method is deprecated... so the "-1" is not fair play ^^ )

Ja͢ck Over a year ago

The link provided doesn't work (perhaps a codepen problem); that said, you should put the gist of what works in the answer instead.

Byscripts Over a year ago

Right now the CodePen is working. And I updated it, using slideDown/slideUp instead of toggle. So it works well regardless the start status. Edit: I put the source code directly in the answer.

Viktor S. · Accepted Answer · 2013-01-29 14:12:53Z

1

First, remember that you toggle event is removed in latest jquery and is deprecated from v 1.8.

Also, in your code you bind toggle event to your button only after it is clicked first time. Instead of that you should do something like this:

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

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

And the last thing, it should be outside of findListingBoxList.

edited Jan 29, 2013 at 14:12

answered Jan 29, 2013 at 14:03

Viktor S.

12.8k1 gold badge30 silver badges56 bronze badges

Comments

Talha Akbar · Accepted Answer · 2013-01-29 14:01:36Z

0

findListingBoxList.slideToggle(200);

You have to give an integer argument not a string i.e. '200'

answered Jan 29, 2013 at 14:01

Talha Akbar

10.1k7 gold badges41 silver badges62 bronze badges

Collectives™ on Stack Overflow

Toggle with text in jQuery?

4 Answers 4

2 Comments

4 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

4 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related