Simple Mobile jQuery Switch button & alternative to .toggle latest jQuery

Question

I'm working on a simple jQuery switch button. The kind you mostly see on mobile.

[ on | off ]

I have the below snippet that I found in a jsfiddle. But it won't work; I tried wrapping it in -

$('.slider-button').toggle(function(){
    $(this).addClass('on').html('Quizz');
    },function(){
    $(this).removeClass('on').html('Read');
    });
})

I tried wrapping it in a on ready as well.

$(document).ready(function(){
$('.slider-button').toggle(function(){
    $(this).addClass('on').html('Quizz');
    },function(){
    $(this).removeClass('on').html('Read');
    });
})

I'm loading the latest in jQuery:

<script src="http://code.jquery.com/jquery-2.0.3.min.js"></script>

Mark-Up:

<div class="slider-frame">
    <span class="slider-button">OFF</span>
</div>

It simply wont toggle onClick.

Edit: Here's an attempt at a fiddle; http://jsfiddle.net/Hn27Q/

Still can't get it; and actually none of the CSS3 is being seen at mobile; any suggestions appreciated.

Bill

Do u have the appropriate css files? Compare runtime applied css from working sample and ur attempt. Srry im mobile. — EricG, Dec 16 '13 at 22:56
what exactly doesn't work? The code you posted seems to be alright. Can you provide a fiddle reproducing your problem? — Michał Rybak, Dec 16 '13 at 22:56

score 1 · Accepted Answer · edited May 23 '17 at 10:25

The .toggle version that accepted functions to alternate on clicks has been removed as of v1.9 (see http://api.jquery.com/toggle-event/)

You can see What to use instead of `toggle(...)` in jQuery > 1.8? for an implementation of that functionality as an extension..

You should use it like this

$('.slider-button').toggleClick (function(){
        $(this).addClass('on').html('Quizz');
    },function(){
        $(this).removeClass('on').html('Read');
    });
});

for ease of use i copy the code here

$.fn.toggleClick = function(){
    var methods = arguments, // store the passed arguments for future reference
        count = methods.length; // cache the number of methods 

    //use return this to maintain jQuery chainability
    return this.each(function(i, item){
        // for each element you bind to
        var index = 0; // create a local counter for that element
        $(item).click(function(){ // bind a click handler to that element
            return methods[index++ % count].apply(this,arguments); // that when called will apply the 'index'th method to that element
            // the index % count means that we constrain our iterator between 0 and (count-1)
        });
    });
};

Simple Mobile jQuery Switch button & alternative to .toggle latest jQuery

1 Answers1