javascript - jquery restart a toggle function -

javascript - jquery restart a toggle function -

i have custom clicktoggle function

it does

tab 1st toggle - open div tab 2nd toggle - close div

after 1st toggle, user can close div clicking outside div, without activating toggle2. next time want open div, continued @ 2nd toggle, bad bug.

so i'm asking if there anyway can end/restart toggle function midway, if user click outside of div, next time click on tab start @ 1st toggle again, instead of continuing @ 2nd toggle.

is there reset can restart toggle function? quite desperate been figuring day.

$(function () { $("#toggle").clicktoggle(function () { // toggle 1 open $(".log").html("click toggle1, show tab panel, istoggle = true"); $("#toggle_content").animate({width:'toggle'},350); $(".container").addclass("overlay-disable"); // alternative exit(i want toggle function restart // if function runs, if not next time want open tab through // toggle 1, go on @ toggle 2 instead bad bug //was suppose exit. $(".container").click(function() { $(".container").unbind("click").removeclass("overlay-disable"); $(".log").html("panel hide success, istoggle = false"); $("#toggle_content").hide(); }); },function() { // toggle 2 exit $(".container").unbind("click").removeclass("overlay-disable"); $(".log").html("click toggle2, hide tab panel"); $("#toggle_content").animate({width:'toggle'},350); }); });

clicktoggle custom plugin toggle between 2 functions in each time click tab, worked smoothly opening , exiting, 1 time added alternative exit can't solution restart toggle function toggle1 if alternative exit activated.

fiddle: http://jsfiddle.net/eekxzq1u/

when u click on tab, pop gray box, when u click on tab again, close smoothly. when tab out, tab won't working smoothly anymore

you can avoid using plugin implementing simple state-machine approach. demo. need

array of functions invoked on click states variable store current state currentstate and handler invoke state functions on click run

code:

var states = [function () { // click button 1st toggle $(".log").html("click toggle1, show tab panel, istoggle = true"); $("#toggle_content").animate({width:'toggle'},350); $(".container").addclass("overlay-disable"); currentstate = 1; //change state $(".container").click(function() { $(".container").unbind("click").removeclass("overlay-disable"); $(".log").html("panel hide success, istoggle = false"); $("#toggle_content").hide(); currentstate = 0; //change state }); }, function() { $(".container").unbind("click").removeclass("overlay-disable"); $(".log").html("click toggle2, hide tab panel"); $("#toggle_content").animate({width:'toggle'},350); currentstate = 0; //change state }], currentstate = 0, run = function() { homecoming states[currentstate].apply(this, arguments); }; $("#toggle").click(run);

javascript jquery html