How to show DIV on first visit and not any visit after until browser is closed

Question

I have the following script which slides in/slide out a DIV from the right:

// jQuery 1.9 > Toggle Event dep 1.8
$(\'#slideClick\').click(function () {
    va         


        

Answer 1

Set a cookie via jquery.

check this answer: https://stackoverflow.com/a/8213459/4016757

Or go directly to the plugin: https://github.com/carhartl/jquery-cookie

Answer 2

In asp.net code

make variable called ex. requestNumber and store it in session

assign a value to +1 in every request

Div "slideClick" add class with requestNumber ex slideClick.Attributes["class","request_"+requestNumber]

In css

slideClick{display:hidden;} slideClick.request_1{display:block;}

UPDATE 1

you may also use

Request.UrlReferrer

if visitor come from website not yours or null, then assign class to appear

after click in any link inside website, UrlReferrer will be your website, then not assign class to appear.

Finally

add class to div you want to appear/disappear according to value get from UrlReferrer, cookie or session as explained above

UPDATE 2

If you insist on your scope, try this

var it = sessionStorage.getItem('it') || 1;
if(it > 1) {
    $('#slideClick').parent().animate({ right: '-290px' }, { queue: false, duration: 0 });
    $("#imgArrow").attr("src", "../theImages/arrow_expand.png");
}

//var it = $('#slideClick').data('it') || 1;
alert(it);
// jQuery 1.9 > Toggle Event dep 1.8
    $('#slideClick').click(function () {

        alert(it);
        switch (it) {
            case 1:
                $(this).parent().animate({ right: '-290px' }, { queue: false, duration: 500 });
                $("#imgArrow").attr("src", "../theImages/arrow_expand.png");
                break;
            case 2:
                $(this).parent().animate({ right: '-0px' }, { queue: false, duration: 500 });
                $("#imgArrow").attr("src", "../theImages/arrow_collapse.png");
                break;
        }
        it++;
        if (it > 2) it = 1;
        sessionStorage.setItem('it', it);
    });

The idea here is to check for the value onload not to wait to click.

Regards

Answer 3

UPDATED ANSWER PER COMMENTS

If you know your browsers support it, you can use sessionStorage instead of the data element. Also to make it more DRY I have added additional functions. You would use it something like this:

$(function() {
  function showContent(dir) {
    var pxVal = '0px', img='arrow-collapse';
    if (dir === 'close') {
        pxVal = '-290px';
        img = 'arrow-expand';
    }
    $('#slideOut').animate({ right: pxVal }, { queue: false, duration: 500 });
    $("#imgArrow").attr("src", "../theImages/"+img+".png");
  }

  function showHideContent () {
    var currVal = sessionStorage.getItem('showSlideArea');  
    if (currVal === 'false') {
        showContent( 'close');
        currVal='true';
    } else {
        showContent( 'open');
        currVal='false';
    }
    sessionStorage.setItem('showSlideArea', currVal);
  }

  $('#slideClick').on('click', showHideContent);

  var currVal = sessionStorage.getItem('showSlideArea');  
  if (currVal === 'true') {
    showContent('close');
  }
});