CODEWITHSUNDEEP
javascriptcookies
Ed Vinicombe
Ed Vinicombe

Reputation: 65

Set cookie when my div is hidden

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;
        });
    });

Upvotes: 1

Views: 643

Answers (1)

Guilherme
Guilherme

Reputation: 1990

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/

Upvotes: 1

Related Questions