Jquery Toggle two function not work in 1.10.1

Question

Jquery Toggle two function not work in jquery 1.10.1 but work\'s on Jquery 1.8.3

HTML

For example, consider the HTML:

        

Answer 1

DEMO

DEMO jQuery 2.x (edge)

use this clickToggle plugin as toggle function is removed from version 1.9

(function ($) {
    $.fn.clickToggle = function (func1, func2) {
        var funcs = [func1, func2];
        this.data('toggleclicked', 0);
        this.click(function () {
            var data = $(this).data();
            var tc = data.toggleclicked;
            $.proxy(funcs[tc], this)();
            data.toggleclicked = (tc + 1) % 2;
        });
        return this;
    };
}(jQuery));
$('#target').clickToggle(function () {
    alert('First handler for .toggle() called.');
}, function () {
    alert('Second handler for .toggle() called.');
});

Answer 2

Here is a generic method, with multiple functions to toggle:

var toggleFunctions = [
    function () { /* do something */},
    function () { /* do something else */},
    ...
    function () { /* do some other stuff*/}
];

$("#target").on("click", function(){
    // returns first function from array
    var currentFunction = toggleFunctions.shift(); 
    // executes the function
    currentFunction(); 
    // pushes current function to the back
    toggleFunctions [] = currentFunction; 
});

Answer 3

This format was removed in version 1.9, so you cannot use it - if you want this logic can be manually implemented or you can make use of the migration plugin

to include the migration plugin, after the inclusion of jQuery library add

<script src="http://code.jquery.com/jquery-migrate-1.2.1.js"></script>

Answer 4

It was removed in jQuery 1.9:

This is the "click an element to run the specified functions" signature of .toggle(). It should not be confused with the "change the visibility of an element" of .toggle() which is not deprecated. The former is being removed to reduce confusion and improve the potential for modularity in the library. The jQuery Migrate plugin can be used to restore the functionality.

Complete upgrade guide: http://jquery.com/upgrade-guide/1.9/

Answer 5

toggle is not working for me in jquery so with the help of stackoverflow my alternative is

<a href="#" id="thiclik"> Click Me To Change</a>
		
		<div id="clickevent">
		</div>

and here is implementation or you can say alternative of toggle function

$('#thiclik').click(function()
{
//toggle alternative 

	function handler1() {
		//alert("first handler for .toggle() called.");
		$("#clickevent").text("Yes");
		$('#thiclik').one("click", handler2);
	}
	function handler2() {
	//	alert("second handler for .toggle() called.");
		$("#clickevent").text("No");
		$('#thiclik').one("click", handler1);
	}
	$("#thiclik").one("click", handler1);
});

working for me but with little problem when i click first time on click me it not work but on second and third time it works fine.

Answer 6

jQuery.toggle has been deprecated since version 1.8 and removed sometime later. You can write your own implementation instead:

function handler1() {
    alert("first handler for .toggle() called.");
    $(this).one("click", handler2);
}
function handler2() {
    alert("second handler for .toggle() called.");
    $(this).one("click", handler1);
}
$("#target").one("click", handler1);

Demo