Preserve toggle state using jQuery

Question

Possible Duplicate:
jQuery Toggle with Cookie

Am having a simple toggle, but the toggle always resets when the page refreshes, so I want to preserve its state by setting a cookie but am not having much Idea how should I do it...

Any idea how do I preserve the state of toggle?

http://jsfiddle.net/Qyufx/

<div class="question_trigger">
   <p>Hi</p>
</div>
<div class="toggle_container">
   <div class="block">Hello</div>
</div>


jQuery(document).ready(function(){
        jQuery(".toggle_container").hide();
        jQuery("div.question_trigger").click(function(){
        jQuery(this).toggleClass("active").next().toggle("slow");
    });
});

do you only need to preserve the state on reload or if one came back after being somewhere else? — Bastian Rang, Jan 01 '13 at 11:13
@Joddy can you provide me with a fiddle integrating that plugin? — Random Guy, Jan 01 '13 at 11:29
@Barmar what do you understand from that answer cuz I cannot — Random Guy, Jan 01 '13 at 11:32
I would use a PHP session variable updated through AJAX instead of cookie. Tell me if you need an example — sdespont, Jan 01 '13 at 11:33
@sdespont you cannot do that, PHP cannot change the cookie value unless and until the page is refreshed — Random Guy, Jan 01 '13 at 11:34
@sdespont so you'll be preserving the state in the database? if it's so, I have no problem, just let me know the procedure, this is important for me — Random Guy, Jan 01 '13 at 11:37
@sdespont But PHP doesn't know that you changed the state of the toggle until you submit the form. — Barmar, Jan 01 '13 at 11:37
The answer in the linked question seems pretty simple to me. When the page is loaded it toggles the container based on the value in the cookie. And whenever you click on the toggle button it saves the current state in the cookie. — Barmar, Jan 01 '13 at 11:38

score 5 · Accepted Answer · answered Jan 01 '13 at 12:43

5

Solution using cookie:

jQuery(document).ready(function() {
    jQuery(".toggle_container").toggle($.cookie('showTop') != 'collapsed');
    jQuery("div.question_trigger").click(function() {
        jQuery(this).toggleClass("active").next().toggle();
        var new_value = $(".toggle_container").is(":visible") ? 'expanded' : 'collapsed';
        $.cookie('showTop', new_value);
    });
});

FIDDLE

answered Jan 01 '13 at 12:43

Barmar

741,623
53
500
612

You are just awesome man thank you very very much, I really appreciate it.. – Random Guy Jan 01 '13 at 14:26

sdespont · Answer 2 · 2013-01-01T11:59:40.827

Basic solution using PHP session variable to store the toggle state

Step 1 : Set the container visible or not durring page loading by checking the PHP session variable value :

jQuery(document).ready(function(){
    if(<?php echo (isset($_SESSION['userId']['toggleState'] && $_SESSION['userId']['toggleState'] === FALSE) ? 'true' : 'false'; ?>)
        $('.toggle_container').hide();
});

Step 2 : Add the script to update the PHP session variable

jQuery(document).ready(function(){
        jQuery(".toggle_container").hide();

        jQuery("div.question_trigger").click(function(){
            jQuery(this).toggleClass("active").next().toggle("slow");

            var data = ($(this).is(":visible")) ? 'true' : 'false';
            $.ajax({
              url: 'ajax/update.php',
              method : 'post',
              data : {data : data},
              success: function(data) {
                  console.log('data updated');
              },
              error: function (request, status, error) {
                  alert(request.responseText);
              }
            });
        });
});

Step 3 : implement ajax/update.php code (use the real userId database value)

<?php
    $_SESSION['userId']['toggleState'] = (isset($_POST['data']) && $_POST['data'] === 'true') ? true : false;
?>

Preserve toggle state using jQuery

2 Answers2

Linked