Cookies failing with EE

Question

I've got the following code working on a static page, but it does not work with EE. Could anyone tell me why?

CSS

.contentB {display: none;}

HTML

<div class="contentA">  
   <h1>Sign up to download (set cookie)</h1>
   <button class="clickme">ClickMe</button>
</div>

<div class="contentB">  
   <h1>Download (cookie set)</h1>
</div>

JS

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.cookie.js"></script>
<script type="text/javascript">
$(document).ready(function () {
        $(".clickme").on('click',function() {
            $.cookie('showContent', 'true', { expires: 7, path: '/' });
          });

 }); 

$ (function (){
    if ($.cookie('showContent') == 'true') {
        $( ".contentB" ).show();
        $( ".contentA" ).hide();
    }
});
 </script>  

Basically I want to show contentB and hide contentA if the cookie is present.

Answer 1

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.cookie.js"></script>

This is likely your problem - you're calling your scripts in a relative fashion, but your URL likely has multiple segments, so the browser is looking for the scripts in the wrong place. Change these to absolute references:

<script type="text/javascript" src="/jquery.js"></script>
<script type="text/javascript" src="/jquery.cookie.js"></script>