jQuery .toggle() Alternative?

Question

Recently, jQuery removed .toggle(), and I don't know how to toggle text within a button. And yes, I've looked around this forum for an answer, but none were adequate.

Here is my code:

$("#show").click(function () {
if($(this).text() == "Show") {
    $(this).text() == "Hide";
    alert("Fill fields");
} else {
    $(this).text() == "Show";
    alert("Clear fields");
}
});

Explanation:

When #show is clicked, execute anonymous function.
if the text is "Show", change to "Hide"
then, alert "Fill fields"
Else, change text to "show"
alert "Clear fields"

fiddle.

`$(this).text() == "Hide";` is checking for equality. It shoudl be `$(this).text("Hide");` — karthikr, Jul 04 '14 at 02:25
I have rolled back your edit, because an edit should not change the meaning of a question. — Sumurai8, Jul 04 '14 at 07:25
possible duplicate of [What is alternative to use after jQuery 1.9 removed .toggle(function,function)?](http://stackoverflow.com/questions/14490957/what-is-alternative-to-use-after-jquery-1-9-removed-togglefunction-function) — Ryan McDonough, Jul 04 '14 at 08:29

score 3 · Accepted Answer · answered Jul 04 '14 at 02:25

3

The setter of .text() is like this:

$(selector).text('text here') // this is setter

and not

$(selector).text() == 'text here'; // this is comparison

So full code:

$("#show").click(function () {
    if($(this).text() == "Show") {
        $(this).text("Hide");
        alert("Fill fields");
    } else {
        $(this).text("Show");
        alert("Clear fields");
    }
});

DEMO

You can shorten it with ternary operators if you want to:

$('#show').click(function(){
   $(this).text(function(_, text) { return text == 'Show' ? 'Hide' : 'Show'; });    
});

answered Jul 04 '14 at 02:25

Amit Joki

58,320
7
77
95

`$(this).text(function(_, text) { return text == 'Show' ? 'Hide' : 'Show'; });` – zerkms Jul 04 '14 at 02:26
1

@zerkms well, I know that, but should I confuse OP with that? – Amit Joki Jul 04 '14 at 02:27
nope, just an alternative for the whole community :-) – zerkms Jul 04 '14 at 02:27
@zerkms That is too confusing, why use that method? – Matthew Jul 04 '14 at 02:28
1

@Matthew: it's a matter of preference – zerkms Jul 04 '14 at 02:29
@Matthew actually, you'll find ternary ifs easier than manual if and else... You'll get to know that later... – Amit Joki Jul 04 '14 at 02:30
@zerkms Ohh okay. Why don't my alerts call and the action loop? – Matthew Jul 04 '14 at 02:30
@Matthew you can do that as well, before `return`ing – Amit Joki Jul 04 '14 at 02:31
@AmitJoki Wouldn't `$(this).text() == "Show"` be `$(this).text("Show")`? When I changed it to that, the alerts don't work – Matthew Jul 04 '14 at 02:47

score 0 · Answer 2 · edited Dec 17 '16 at 09:27

0

Quite likely you were looking for toggle event alternative; you could pass n functions to it and they would be fired in succession as you clicked.

Check jquery-toggleclick.js. toggleClick jQuery plugin will do just that.

Usage:

$("#show").toggleClick(fillFields, clearFields);

Then you can set the text in the appropriate function

edited Dec 17 '16 at 09:27

Amit Kumar Gupta

7,193
12
64
90

answered Jul 04 '14 at 02:37

PeterKA

24,158
5
26
48

score -3 · Answer 3 · answered Jul 04 '14 at 02:36

-3

I checked jquery documentation. Toggle is still there. http://api.jquery.com/toggle/

answered Jul 04 '14 at 02:36

chiragpatel11

1
1

1

No, it was depreciated in 1.8 – Matthew Jul 04 '14 at 02:36
To clarify, `toggle()` which shows/hides content is still there. `toggle()` which attaches event handlers has been removed. – Brandon Gano Jul 04 '14 at 03:05
attaches event handlers - depreciated in 1.8 http://api.jquery.com/toggle-event/ shows/hides content http://api.jquery.com/toggle/ – chiragpatel11 Jul 04 '14 at 13:13

jQuery .toggle() Alternative?

3 Answers3

Related