Code not working in google chrome but works fine with Mozilla

Question

i am working on this fiddle with cookies. Here is the link. but it works fine with Mozilla for the first time. when i delete all the cookies but when ever i reopen the page it goes directly to the second div which has to be displayed after the button click from the first div. as well as the second div must be shown and first div must be hidden when refreshed. and even this does not work for chrome in any ways. any idea or suggestions to improve. thanks in advance. here is my code:

       $('#sbut1').click(function() { 
       $('.cont1').show();
     $('#log1').hide();
        $.cookie('shown', true);

        });

     $(function() {
      if ($.cookie('shown')) {
         $('#sbut1').click()
       }
        });

Answer 1

Update:

there was a slight syntax error in my answer (forgot closing parentheses for IIFE). Anyway, here's an updated fiddle, and (for completeness) here's the code. I've optimized it some more, but it's basically the same thing:

$(function()
{
    (function(sbut1)
    {
        (function(log1, cont1)
        {
            sbut1.on('click',function()
            {
                cont1.show();
                log1.hide();
                $.cookie('shown', true);
                $(this).off('click');
            });
        }($('#log1'), $('.cont1')));
        if ($.cookie('shown'))
        {
            sbut1.trigger('click');
        }
    }($('#sbut1')));
});

There's a couple of things that might seem irrelevant (like binding and unbinding the event listeners), but the comments in the fiddle explain why I'm doing this. The main reason is to clean up any references to the DOM, in order for them to be flagged for garbage collection.
Again, this code works just fine for me in both FF and chrome

In response to my last comment, same thing, only vanillaJS:

window.addEventListener('load', function l()
{
    var cookie = (function(trueUndef)
    {
        var clean = (localStorage || document.cookie);
        return function(name, val)
        {
            if (val === trueUndef)
            {
                if (clean === localStorage)
                {
                    return clean.getItem(name);
                }
                val = clean.split(name + '=')[1];
                return val ? val.match(/^[^;]+/)[0] : trueUndef;
            }
            if (clean === localStorage)
            {
                return clean.setItem(name, val);
            }
            return !!(clean = name + '=' + val);
        };
    }()),
    sbut1 = document.getElementById('sbut1');
    sbut1.addEventListener('click', (function clickHandler(log1, cont1)
    {
        return function(i)
        {
            log1.style.display = 'none';
            for(i=0;i<cont1.length;i++)
            {
                cont1[i].style.display = 'block';
            }
            cookie('foo', true);
            sbut1.removeEventListener('click', clickHandler, false);
        };
    }(document.getElementById('log1'), document.getElementsByClassName('cont1'))), false);
    if (cookie('foo') === 'true')
    {
        sbut1.dispatchEvent(new Event('click'));
    }
    window.removeEventListener('load',l, false);
}, false);

---

I've had a look at your fiddle, and changed the code to this:

$(function()
{
    $('#sbut1').click(function()
    { 
        $('.cont1').show();
        $('#log1').hide();
        $.cookie('shown', true);
    });
    if ($.cookie('shown'))
    {
        $('#sbut1').click()
    }
});

Which works like a charm, for me (with option no wrap - in head) as you can see here

Just a side-note, you're using a lot of DOM selectors, which is calling functions all over the place, and queries the DOM way too much. Your code could be a lot more efficient if you assigned a reference to these DOM nodes somewhere:

$(function()
{
    (function(sbut1, log1, cont1)
    {
        sbut1 = sbut1 || $('#sbut1');//safety-net
        log1 = log1 || $('#log1');
        cont1 = cont1 || $('.cont1');
        sbut1.click(function()
        {
            cont1.show();
            log1.hide();
            $.cookie('shown', true);
        });
        if ($.cookie('shown'))
        {
            sbut1.click();
        }
    }($('#sbut1'), $('#log1'), $('.cont1')));
});

The IIFE is optional, of course, but it wraps the DOM references in a scope, so they're only available to those parts of your script that actually need them.
There's a lot of ways to improve on this code, still, but excess DOM queries are easy to avoid, so I thought I'd suggest you taking care of those.