JQuery Cookie not function

Question

I had a javascript Function showHide(shID) , which is a function to hide div and show content after clicked "read more" . Here is my Fiddle : Fiddle

after added JQuery Cookie into this function , its seem like function showHide(shID) was gone , can anyone help me to fix it ? thanks I really need help . here my Fiddle : Fiddle

I need to do smtg like this :First click on "readmore", hidden content will show,after set cookie and user come back to visit my page hidden content still showing .

<div id="wrap">
   <a href="#" id="example-show" class="showLink" onclick="showHide('example');">
      <button class="btn-u btn-u-lg btn-block btn-u-dark-orange">
         Read More
      </button>
   </a>
   <div id="example" class="more">
      <iframe width="600" height="315" src="//www.youtube.com/embed/BaPlMMlyM_0" frameborder="0" allowfullscreen></iframe>
      <p>Congratulations! You've found the magic hidden text! Clicking the link below will hide this content again.</p>
   </div>
</div>

JQuery Cookie - it's plugin. And you need include it separately. Correct me if i am wrong — demo, Feb 05 '15 at 14:23
Hi demo ,Thanks for reply me , I not really sure with this too ,my first time to use JQuery cookie — lucas, Feb 05 '15 at 14:38
please see this http://plugins.jquery.com/cookie/ I think you need to download and add library to project — demo, Feb 05 '15 at 14:41

score 3 · Accepted Answer · edited May 23 '17 at 12:12

3

I changed the script logic a little: show the content when showhide-... is set to 1. Also I added a parameter to the showHide function: setCookie. When this is false, the cookie is no set/changed.

function showHide(setCookie) {
    var shID = $(this).data("showhide")
      , $shEl = $("#" + shID)
      , $showHide = $("#" + shID + '-show')
      ;

    if ($shEl.is(":hidden")) {
        if (setCookie !== false) {
            jQuery.cookie("showhide-" + shID, 1);
        }
        $showHide.hide();
        $shEl.show();
    } else {
        if (setCookie !== false) {
            jQuery.cookie("showhide-" + shID, 0);
        }
        $showHide.show();
        $shEl.hide();
    }
}

jQuery(document).ready(function () {
    $("#example-show").on("click", showHide);
    if (jQuery.cookie("showhide-" + "example") == '1') {
        showHide.call($("#example-show").get(0), false);
    }
});

To add an expire date, just pass the third argument to the $.cookie call:

var date = new Date();
var minutes = 30;
date.setTime(date.getTime() + (minutes * 60 * 1000));
$.cookie("example", "foo", { expires: date });

(refer to How to expire a cookie in 30 minutes using jQuery? for more information)

JSFIDDLE

edited May 23 '17 at 12:12

Community

1
1

answered Feb 06 '15 at 06:37

Ionică Bizău

109,027
88
289
474

Hi Ionica Bizau , really thanks for your help ! It's work fine for me ! However ,how can I set 1 day expire date for this ? Thanks ! =D – lucas Feb 06 '15 at 08:12
am I right ? if I wrote like this ?put 1 minute as testing http://jsfiddle.net/Garfrey/3Lzytvqy/4/ , what should I change in "foo" . – lucas Feb 06 '15 at 08:24
@lucas In your example (last jsfiddle link), the `example` cookie is set every time you load the page, but will expire after one minute. – Ionică Bizău Feb 06 '15 at 09:03
I see , now I put 30mins for expired , but it's seem like not working ,$.cookie("example", "foo", << do I need to change "foo" ? http://jsfiddle.net/Garfrey/3Lzytvqy/5/ – lucas Feb 06 '15 at 09:30
I had put $.cookie("example", "shID", { expires: date }); is it correct ? sorry I not really sure which one is my "cookie", "value" . – lucas Feb 06 '15 at 09:56
@lucas You have to understand what are the cookies, then: http://en.wikipedia.org/wiki/HTTP_cookie – Ionică Bizău Feb 06 '15 at 10:18

rba · Answer 2 · 2015-02-06T11:22:43.110

0

Names of cookies are case sensitive and you have to read the same name of cookie which you set before. In your case you set jQuery.cookie("showHide-"+shID, 1) and check jQuery.cookie("showhide-" + "example"). "showHide-" and "showhide-" are mismatching.

EDIT:

    if (document.getElementById(shID + '-show').style.display != 'none') {
        // Set cookie when button has been clicked 
        jQuery.cookie("showhide-"+shID, 1);
        // ...
    } else {
        jQuery.cookie("showhide-"+shID, 0);
        // ...
    }

    if (jQuery.cookie("showhide-" + "example") == 1) {
        // Trigger button click if cookie is set 
        $("#example-show").trigger("click");
    }

edited Feb 06 '15 at 11:22

answered Feb 05 '15 at 14:52

rba

338
2
11

Hi rba, thanks for your reply , means I just have to put "showhide" in "showHide" right ? I had tried this before not working – lucas Feb 05 '15 at 15:27
Probably you just need to place your button trigger when cookie is set while you do it inversely. From you answer it seems you want to "set cookie and user come back to visit my page hidden content still showing" and in your comment in code you try to "// Cookie not set so show div". – rba Feb 05 '15 at 16:05
yes , I need "set cookie and user come back to visit my page hidden content still showing" ...sorry I not really understand , can you do a Fiddle for me as example ? I need for my side project , and I'm new in javascript too ..thanks rba, – lucas Feb 05 '15 at 16:36
Hi rba ,I had tried your code , its seem like not working ... can you help me to review ,am I wrote wrong ? thanks http://jsfiddle.net/Garfrey/vvhvhy36/5/ – lucas Feb 06 '15 at 02:29

JQuery Cookie not function

2 Answers2

Linked