Hi,

I am trying to expand and collapse a list upon clicking a link. The expanded list is a list of links that display some information. Everything is working as expected but, when I expand the list and  click on any link the list get collapsed (My JQuery code displays the collapsed list on page load). What I want to do is even after the refresh I do not want the list to Collapse unless I click on it to collapse. I wonder is this possible. My Jquery 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 the list expands, I am displaying an horizontal bulb and when the list collapses i am displaying vertical bulb.

Thanks in advance