+ Start a Discussion
sravusravu 

Help With JQuery

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

Best Answer chosen by Admin (Salesforce Developers) 
sravusravu

I have solved the issue. Instead of using JQuery inside the component I used it in the page. and it worked.

 

Using JQuery cookies for collapsible layouts

 

You can find the sample in the above link.

All Answers

Anand@SAASAnand@SAAS

Two options:

 

1. When the user clicks on "hide", cookie that into the user's browser and use that cookie later to hide it automatically.

2. WHen they click on hide, use <apex:actionFunction> to store the state in a controller variable and use that in your JQuery.ready() appropriately.

sravusravu

Thanks for the reply. Is there any possibility that we can store a value in a variable intiially and use the same variable to hide and show the panel. Even after the page reloads, I should be able to use that variable value.

 

I am not sure how to use cookie in the visualforce page. Could you elaborate on this or is there any other method to accomplish this apart from cookie.

sravusravu

I tried to set cookie value in JQuery but it is not working. I do not want to use controller.

sravusravu

I have solved the issue. Instead of using JQuery inside the component I used it in the page. and it worked.

 

Using JQuery cookies for collapsible layouts

 

You can find the sample in the above link.

This was selected as the best answer