Envira Phani
Envira Phani

Reputation: 49

Separate Buttons for jQuery toggle event with cookies

I have made a jQuery toggle, where user can select the width of theme to be fluid or fixed with a toggle button. The thing is working fine, but i want to add separate toggle buttons one for fixed width on click and another for fluid width on click.

I tried, but i was not successful.

Here is the code i have used

   $(document).ready(function () {
var setWidth = $.cookie("width");
if (typeof setWidth !== "undefined" && setWidth == "85%") {
    $('#container,.wrp').width(setWidth); // 85% width set using cookie
} else if (typeof setWidth !== "undefined" && setWidth == "960px") {
    $('#container,.wrp').width(setWidth); // 960px,1000px(for wrp) width set using cookie
}
$('#toggle-button').click(function () {
    var toggleWidth = $("#container").width() == 960 ? "85%" : "960px";

    $('#container, .wrp').animate({
        width: toggleWidth
    });
    $.cookie('width', toggleWidth);
});
});

Here is the fiddle : http://jsfiddle.net/envira/kTrLL/

Thank you.

Upvotes: 0

Views: 69

Answers (1)

Dekron
Dekron

Reputation: 1212

You can add another on click function with a new button.

$('#toggle-button-resp').click(function () {
    var toggleWidth = "85%";

    $('#container, .wrp').animate({
        width: toggleWidth
    });
    $.cookie('width', toggleWidth);
});

jsfiddle

Upvotes: 1

Related Questions