Jquery Cookie not working properly

Jquery Cookie not working properly

Hi,

I am developing a visualforce page and i am trying to expand and collapse the panel that has links to different pages. I used jQuery to expand and collapse the list. But when I expand the list and click on one item, the page gets refreshed and the list is collapsing as by default i am hiding the list. When user clicks on the list heading i am opening the list. The Jquery i am using is as follows:

<script type="text/JavaScript" src="{!URLFOR($Resource.jQuery)}"></script>
       <script type="text/JavaScript">
           jQuery.noConflict();
           
           jQuery(document).ready(function($) {
           
               $("#ProductPanel").hide();
     
               $("#HorBulb").hide();
         
           
               $('#ProductDetails').click(function() {
                   if($("#ProductPanel").is(":hidden")) {
                       $("#ProductPanel").slideDown("slow");
                       $("#HorBulb").show();
                       $("#VerBulb").hide();
                       return false;
                   }
                   else{
                      $("#ProductPanel").hide("slow");
                       $("#HorBulb").hide();
                        $("#VerBulb").show();
                      return false;
                   }
               });
                         
           
       </script>

When I expand the list and click on one item, I want the list to be expanded even after the page refresh. I tried cookies but by default the list seems to be open only even after  i collapse it.

Any suggestions or workaround for my issue will be helpful.

Thanks in advance.