jquery cookie setup

Question

I am a newbie at jquery. I've been researching how to set cookies for a jquery function using the cookie plugin.

I have this simple hide and show function for a div but want the class states to persist after links to other pages and refreshing.

The JS looks like this

<script type="text/javascript">

$(document).ready(function(){

    $("div.toggle_search").hide();
    $("h2.trigger_up").click(function() {
    $(this).toggleClass("active").prev().slideToggle(250);
      if ($.cookie('more_search','1')) {
        $("#criteria").attr('class', $.cookie('more_search'));
    } else {
        $("#criteria").attr('class', 'active');
    }
    $.cookie('more_search', $(".trigger_up").attr('class'));
            return false;
    });

});

</script>

HTML

<div id="criteria">
    <div class="toggle_search">    
        <div class='left'>
            Stuff goes here
        </div>
    </div>
    <h2 class="trigger_up"><a href="#">See More Search Criteria</a></h2>

    <div class="clear"></div>
</div>

Any help would be greatly appreciated. !

I appreciate the response. But I decided to go with the second option and start over. Thanks! — Lpillory, Jun 27 '12 at 00:37

score 0 · Answer 1 · answered Jun 26 '12 at 18:00

Check the cookie before you show or hide the div. In this snippet, the div with id="moreButton" (not an actual button) has text saying "More" or "Less" for showing and hiding the div with id="moreOptions":

$(document).ready(function() {                                                  
    if ($.cookie("show") == "show") {                                       
        $("#moreButton").html("Less «");                                
        $("#moreButton").attr("title", "Hide the extra search parameters.");
        $("#moreOptions").show();                                       
    }                                                                       
    else {                                                                  
        $("#moreButton").html("More »");                                
        $("#moreButton").attr("title", "See more search options.");     
    }                                                                       

    $("#moreButton").click(function() {                                     
        $("#moreOptions").animate({ "height": "toggle" }, { duration: 60 });
        if ($("#moreButton").html() == "More »") {                      
            $("#moreButton").html("Less «");                        
            $("#moreButton").attr("title", "Hide the extra search parameters.");
            $.cookie("show", "show", { path: '/' })                 
        }                                                               
        else {                                                          
            $("#moreButton").html("More »");                        
            $("#moreButton").attr("title", "See more search options.");
            $.cookie("show", "", { path: '/' })                     
        };                                                              
    });                                                                     


}                                                                               
                  );

Thanks a bunch! I used this and it's working. I am still looking into adding a directional icon added to teh html string. I tried a couple of things but it whacked out a little. — Lpillory, Jun 27 '12 at 00:35
Sorry I closed prematurely. I am looking at http://api.jquery.com/html/ to see how to add images. Is this a good place to look? Again, thanks! — Lpillory, Jun 27 '12 at 00:36
@Lpillory Yes, you can set the innerHtml with that jquery method, e.g. setting it to something including an tag. If you have any more questions about that, you should start a new question. — Andrew Morton, Jun 27 '12 at 12:58

score 0 · Answer 2 · edited Jun 26 '12 at 21:32

Have you included the reference to the jQuery-cookie library?

See the documentation found here at the plugin page it looks like you are using or trying to use, https://github.com/carhartl/jquery-cookie/

By setting the cookie to expire in the future, it should persist until it hits the expiration date.

Ex: $.cookie('more_search', $(".trigger_up").attr('class'), { expires: 7 }); //Would expire in a week.

Also notice you have two classes when you get $(".trigger_up").attr('class') trigger_up and active (when the link is clicked for the first time), you might want to parse that the cookie value is set to "active"

jquery cookie setup

2 Answers2