Closing or hiding an info box with an x

Question

I have tried searching for clues, but drawn a big blank. Probably I am searching for the wrong thing!

I have created a basic info block on a page.

I would like to give users the option to hide or close that box by clicking on an x.

I am assuming that I would need to use a cookie - but no idea where to start! Maybe jquery, as I have that loaded on every page for other elements?

The one important factor is that it should re-appear when new information is displayed.

How is that done? Can anyone assist?

Thanks!

could you please post your code and if possible jsfiddle link too. — Bhushan Kawadkar, Sep 30 '14 at 07:47
You should also consider reading things like this http://htmldog.com/guides/javascript/beginner/ — Nicolas, Sep 30 '14 at 07:48
Hi, per your understanding, this is what you are looking for: [BootStrap Alert JS Fiddle](http://jsfiddle.net/Y3d3D/63/) — Rajesh, Sep 30 '14 at 07:54
Rajesh - thanks. No the reverse I guess - this is on many sites, say a welcome to x site and an x on the right to hide that info block. — Ian, Sep 30 '14 at 08:06

Waltur Buerk · Answer 1 · 2014-10-02T10:01:30.940

0

Once you've read the beginners javascript guide Nicolas linked for you and maybe a jQuery tut, you're probably going to end up writing something like this.

Javascript

jQuery('div.xbutton').click(function(){
jQuery('div.infoblock').hide();
});

HTML

<div class="infoblock">Information text <div class="xbutton">X</div></div>

But that's in the future, so start with reading the guide. It'll be plenty helpful :)

edited Oct 02 '14 at 10:01

answered Sep 30 '14 at 08:00

Waltur Buerk

1,278
13
17

score 0 · Answer 2 · edited May 23 '17 at 10:33

You can use something like this:

<div id="content" style="display:none;">
    <span class="close">&times;</span>
    Some text
</div>

<script>
    jQuery(document).ready(function(){
        if (!readCookie('messageClosed')){
            jQuery('#content').show();
        }
        jQuery('#content .close').click(function(){
            jQuery('#content').slideUp();
            createCookie('messageClosed', 1, 365);
            return false;
        });
    });
</script>

For functions readCookie and createCookie look this: https://stackoverflow.com/a/1460174/2828391

Closing or hiding an info box with an x

2 Answers2