Set cookie when my div is hidden

Question

I want to set a cookie for 1 week to keep a div closed for the user. I've ripped a couple of bits and bobs from around SO and to be honest - I dont really know what i'm doing!

My HTML:

<div class="d-all t-all m-all group following_prompt">
<button type='button' id='hideshow' value='hide/show' class="close"><span class="icon-cross black right"></span></button>
    </section>
    <article class="d1-d3 t1-t4 m-all user_following">
    {{ member:profile uid="{author}" }}
        <a href="/profile/{{ username }}" class="user_avatar d1 m1">{{ gravatamatic:quicky
          email = "{email}"
          size  = "64"
         }}</a>
            <section class="d2-d3 m2-m4 author_bio">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</p>
                <a class="global_btn_white" href="/">Follow {{ username }}</a>
            </section>
    {{ /member:profile }}
    </article>
</div>

My JS:

jQuery(document).ready(function(){
        $('#hideshow').on('click', function(event) {        
             $('.following_prompt').hide()
             createCookie('hide', true, 1)
             return false;
        });
    });

Guilherme · Answer 1 · 2015-08-25T16:11:57.663

1

There is a javascript plugin to make this very easy

jQuery(document).ready(function(){
    // if the cookie exist, hide the element
    var hide = Cookies.getJSON('hide');

    if (hide && hide.element)
       $(hide.element).hide();

    $('#hideshow').on('click', function(event) {        
         $('.following_prompt').hide()

         Cookies.set('hide', {element: '.following_prompt'}, { expires: 7 });
         return false;
    });
});

as you can see, you can save javascript to the cookie that it converts automagically, so you can store a list of elements.

http://jsfiddle.net/gschutz/or8b65e4/3/

edited Aug 25 '15 at 16:11

answered Aug 25 '15 at 15:17

Guilherme

1,980
22
23

I've got this going but the button doesnt hide the div anymore. I get the error 'Cannot read property 'element' of undefined' in the console?? – Ed Vinicombe Aug 25 '15 at 15:29
Thanks Guilherme, this works however the div display:block for a second and then flicks to display:none. Is there a way to avoid the flickering of the div? – Ed Vinicombe Aug 25 '15 at 16:05
for this I need to see your `CSS`, I edited with a new sample, check that out if helps you.. – Guilherme Aug 25 '15 at 16:11
I can see it's doing exactly the same on your js fiddle example. You can see the div expand as you reload the page ... – Ed Vinicombe Aug 25 '15 at 16:28
it could be your browser, because for me, nothing is flickering – Guilherme Aug 25 '15 at 17:37
Really? When I re-load the browser there is a split second where I can see the div visible then it quickly collapses ... – Ed Vinicombe Aug 25 '15 at 18:42
That's great would it be possible to help me and update the code you provided with my class names? I don't know JS at all!! – Ed Vinicombe Aug 26 '15 at 11:28

Set cookie when my div is hidden

1 Answers1

Linked