Can jquery expandable/collapsible divs stay open between page requests?

I need some big picture jqueery development help.

At the present time, I have multiple pages for particular grapes for a vineyard. Since some of the info is being sent to the page from a database I thought about putting all the info for the page into the database then calling it from whatever button the user clicks on "block"

So my question is.. Is it  possible to have an expandable/collapsible div using Jquery stay open between page requests. That way it looks like the red highlight for the details section would just move from varietal to what ever varietal the user clicked on.

I have attached a screen shot for better clarification.

Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

smfmetro10Author Commented:
actually it doesn't actually have to be jquery. It could be some type of cfgrd. It just needs to expand and contract based on the seasonal details button. Then needs to stay open (or closed) between pages.
if i understand you correctly, what you are after is remembering the 'state' (collapsed/expanded) of the seasonal details section between requests to different pages that have that section?

if so, you will need to implement your own state management, either using a cookie or, since you are using cf, session variables.

cookies can be set using javascript, so if you go this way you can incorporate code to set a cookie holding the state of the seasonal details area into the same function that expands/collapses the area.

if you want to implement this using cf, then you will need to incorporate an ajax call to a cfc/cfm which will either set a session var, or, again, set a cookie using <cfcookie> tag.

either way, your pages that show the seasonal details area should then use conditional logic to display it as either collapsed or expanded, based on the value of cookie or session var.

smfmetro10Author Commented:
Thanks for the reply.

Yes, that is correct. I would like to be able to have the page remember the 'state' of the seasonal details section. The end result would be to have the user be able to click on different blocks (navigation buttons) and have the details section remain open and the highlight (red) move from one block to another.

Could you point me in the right direction - code wise -  to get me started?  Which way would you recommend?

Determine the Perfect Price for Your IT Services

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden with our free interactive tool and use it to determine the right price for your IT services. Download your free eBook now!

smfmetro10Author Commented: has an animated div in jquery that almost worked. You just add persistence by adding  animatedcollapse.addDiv('details', 'fade=80,speed=800, PERSIST=1, hide=1').  It works in IE 8 and firefox but not in IE 7. So it looks like im back to the server side for state management.
here's how you could do it using session var (see attached code).

some notes:
- make sure session management is enabled in your application (i.e. you have sessionmanagement="yes" in your Application.cfc/cfm)
- save the cfc as test.cfc in the same folder as page1.cfm and page2.cfc
- javascript uses jquery library ( the library is loaded from google APIs cdn.
- load page1.cfm in your browser, then toggle the div display by clicking on the 'show/hide' button. now click the 'go to page 2' link - the div on page2 will be in the same state you left it on page1

<!--- the cfc. save it as test.cfc in the same folder as cfm pages --->
<cfcomponent output="no">
        <cffunction name="setDivState" access="remote" returntype="void">
                <cfargument name="state" type="boolean" required="no" default="0">
                <cflock scope="session" timeout="2" type="exclusive">
                        <cfset session.divState = arguments.state>

<!--- page1.cfm --->
<cfparam name="session.divState" default="0"><!--- cfparam our session var --->
<script type="text/javascript" src=""></script>
<script type="text/javascript">
$(document).ready(function() {
        var flip = <cfoutput>#session.divState#</cfoutput>; // set flip var to current value of session.divState var
        if (flip % 2 == 1) $("#seasondata").css('display', 'block'); // set initial display of our div based on session var value
        $("#toggleDiv").click(function(){ // bind this to clikc event of the button
                $("#seasondata").toggle(flip++ % 2 == 0); // toggle our div based on value of flip var
                $(this).attr('value', ((flip % 2 == 0) ? 'Show' : 'Hide') + ' Div'); // change the text displayed on the button
                $.get('test.cfc?method=setDivState&state='+(flip % 2)); // call the setDivState() method of our cfc via ajax to set session var value
<h1>Page 1</h1>
<h3><a href="page2.cfm">Go to Page 2</a></h3>
<input type="button" id="toggleDiv" value="<cfif session.divState eq 0>Show<cfelse>Hide</cfif> Div" />
<br />
<br />
<div id="seasondata" style="border:1px solid black; background-color:#f0f0f0; text-align:center; display:none">
<p>This is a div you can show/hide</p>

<!--- page2.cfm --->
it is exactly the same as page1.cfm, just change the <h1> text to Page 2 and the link to point back to page1.cfm

Open in new window

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
smfmetro10Author Commented:
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
ColdFusion Language

From novice to tech pro — start learning today.