Need help getting an expanded column to remain expanded on refresh

Hi,
     I have the attached code, which offers 5 columns.  When the first column is clicked, it expands, but then on refresh it closes.  I need it to remain open until the user closes it down!  How can this be achieved?

Thanks

Damian
<html>

<head>

<meta http-equiv="Content-Language" content="en-gb">

<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">

<meta http-equiv="X-UA-Compatible" content="IE=edge" />

<title>Search Results</title>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>


<script type='text/javascript'>

$(document).ready(function() { 
$('#expand').click(function () { 
switch($('#bookexp').css('width') )

{ 

case '144px': 

     

        $('#bookexp').css('width','720px');
        $('#bookexp').removeClass('bg3').addClass('bg4');
        $('#contactexp').css('width','0px');
        $('#arrivalexp').css('width','0px');
        $('#clinicalexp').css('width','0px');
        $('#followupexp').css('width','0px');		        


break; 



case '720px':

       

        $('#bookexp').css('width','144px');
        $('#bookexp').removeClass('bg4').addClass('bg3');
        $('#contactexp').css('width','144px');
        $('#arrivalexp').css('width','144px');
        $('#clinicalexp').css('width','144px');
        $('#followupexp').css('width','144px');
		
break; 
default: 
}

});

});



</script>

</head>


<body>



<div id="container">


<div align="center">



<div style="width: 1000px; margin-top: 355px;">

<div style="float: left; width: 50px; font-size: 7pt; font-family:Arial; text-align: center; height: 100px;"><div style="margin-bottom: 10px;">&nbsp;</div></div>
		<div id="bookexp" class="bg3" style="background-color: #c7ee9d; height: 100px; float: left; width: 144px; font-family:Arial; color: #000; font-size: 12pt; font-weight:bold; text-align: left; overflow: hidden;"><div style="display: block;" id="expand"><div style="margin-top: 15px;">&nbsp;Bookings</div><div style="margin-top: 35px; width:72px; font-family:Arial; font-size: 8pt; display: inline-block; overflow: hidden; text-align: center; vertical-align:bottom;">&nbsp;Consultation<br>&nbsp;Hours</div><div style="margin-top: 35px; font-family:Arial; font-size: 8pt; display: inline-block; width:72px; text-align: center;">&nbsp;Evening<br>&nbsp;Opening</div><div style="margin-top: 35px; font-family:Arial; font-size: 8pt; display: inline-block; width:72px; text-align: center;">&nbsp;Early<br>&nbsp;Mornings</div><div style="margin-top: 20px; font-family:Arial; font-size: 8pt; display: inline-block; width:72px; text-align: center;">&nbsp;Weekend<br>&nbsp;Opening</div><div style="margin-top: 20px; font-family:Arial; font-size: 8pt; display: inline-block; width:72px; text-align: center;">&nbsp;Online Appt<br>&nbsp;booking</div><div style="margin-bottom: 0px; font-family:Arial; font-size: 8pt; display: inline-block; width:72px; text-align: center;">&nbsp;Booking <br>&nbsp;Timescale</div><div style="margin-bottom: 0px; font-family:Arial; font-size: 8pt; display: inline-block; width:72px; text-align: center;">&nbsp;Advance<br>&nbsp;Booking</div><div style="margin-bottom: 0px; font-family:Arial; font-size: 8pt; display: inline-block; width:72px; text-align: center; vertical-align: top; margin-top:35px;">&nbsp;Sit & Wait</div><div style="margin-bottom: 0px; font-family:Arial; font-size: 8pt; display: inline-block; width:72px; text-align: center;">&nbsp;Text<br>&nbsp;Reminders</div></div></div></div>
		<div id="contactexp" class="bg1" style="background-color: #F495C7; height: 100px; float: left; width: 144px; font-family:Arial; color: #000; font-size: 12pt; font-weight:bold; text-align: left; overflow: hidden;"><div style="display: block;" id="expand4"><div style="margin-top: 15px;">&nbsp;Contact</div><div style="margin-top: 35px; width:72px; font-family:Arial; font-size: 8pt; display: inline-block; overflow: hidden; text-align: center; vertical-align:bottom;">&nbsp;Phone<br>&nbsp;Advice</div><div style="margin-top: 35px; font-family:Arial; font-size: 8pt; display: inline-block; width:72px; text-align: center;">&nbsp;Skype<br>&nbsp;Advice</div><div style="margin-top: 35px; font-family:Arial; font-size: 8pt; display: inline-block; width:72px; text-align: center;">&nbsp;Male<br>Doctors</div><div style="margin-top: 20px; font-family:Arial; font-size: 8pt; display: inline-block; width:72px; text-align: center;">&nbsp;Female<br>Doctors</div><div style="margin-top: 20px; font-family:Arial; font-size: 8pt; display: inline-block; width:72px; text-align: center;">&nbsp;Ltd Appt<br>&nbsp;Length</div><div style="margin-bottom: 0px; font-family:Arial; font-size: 8pt; display: inline-block; width:72px; text-align: center;">&nbsp;1 Issue<br>&nbsp;Per Appt</div><div style="margin-bottom: 0px; font-family:Arial; font-size: 7.5pt; display: inline-block; width:72px; text-align: center;">&nbsp;Book Multiple<br>&nbsp;Appointments</div></div></div></div>
		<div id="arrivalexp" class="bg3" style="background-color: #c7ee9d; height: 100px; float: left; width: 144px; font-family:Arial; color: #000;  font-size: 12pt; font-weight:bold; text-align: left; overflow: hidden;"><div style="display: block;" id="expand1"><div style="margin-top: 16px;">&nbsp;Arrival &<br>&nbsp;Waiting</div><div style="margin-top: 15px; width:72px; font-family:Arial; font-size: 8pt; display: inline-block; overflow: hidden; text-align: center; vertical-align:bottom; vertical-align: top; margin-top:15px;">&nbsp;Parking</div><div style="margin-top: 15px; font-family:Arial; font-size: 8pt; display: inline-block; width:72px; text-align: center;">&nbsp;Disabled<br>&nbsp;Parking</div><div style="margin-top: 15px; font-family:Arial; font-size: 8pt; display: inline-block; width:72px; text-align: center;">&nbsp;Average<br>Wait Time</div><div style="margin-top: 15px; font-family:Arial; font-size: 8pt; display: inline-block; width:72px; text-align: center;">&nbsp;Interpretation<br>&nbsp;Services</div><div style="margin-top: 15px; font-family:Arial; font-size: 8pt; display: inline-block; width:72px; text-align: center;">&nbspPic of<br>&nbsp;Surgery</div><div style="margin-top: 15px; font-family:Arial; font-size: 8pt; display: inline-block; width:72px; text-align: center;">&nbsp;Wheelchair<br>&nbsp;Access</div></div></div>
        <div id="clinicalexp" class="bg1" style="background-color: #F495C7; height: 100px; float: left; width: 144px; font-family:Arial; color: #000;  font-size: 12pt; font-weight:bold; text-align: left; overflow: hidden;"><div style="display: block;" id="expand2"><div style="margin-top: 16px;">&nbsp;Clinical <br>&nbsp;Services</div><div style="margin-top: 15px; width:72px; font-family:Arial; font-size: 8pt; display: inline-block; overflow: hidden; text-align: center; vertical-align:bottom;">&nbsp;Bloods<br>&nbsp;Onsite</div><div style="margin-top: 15px; font-family:Arial; font-size: 8pt; display: inline-block; width:72px; text-align:center;">&nbsp;Specialist<br>&nbsp;Services</div></div></div>
        <div id="followupexp" class="bg3" style="background-color: #c7ee9d; height: 100px; float: left; width: 144px; font-family:Arial; color: #000;  font-size: 12pt; font-weight:bold; text-align: left; overflow: hidden;"><div style="display: block;" id="expand3"><div style="margin-top: 16px;">&nbsp;Follow-up &<br>&nbsp;Support</div><div style="margin-top: 15px; width:72px; font-family:Arial; font-size: 8pt; display: inline-block; overflow: hidden; text-align: center; vertical-align:bottom;">&nbsp;Repeat<br>&nbsp;Prescrip</div><div style="margin-top: 15px; font-family:Arial; font-size: 8pt; display: inline-block; width:72px; text-align: center;">&nbsp;Online<br>&nbsp;Prescrip</div><div style="margin-top: 15px; font-family:Arial; font-size: 8pt; display: inline-block; width:72px; text-align: center;">&nbsp;Onsite<br>&nbsp;Pharmacy</div><div style="margin-top: 15px; font-family:Arial; font-size: 8pt; display: inline-block; width:72px; text-align: center;">&nbsp;Online<br>&nbsp;Test Results</div><div style="margin-top: 15px; font-family:Arial; font-size: 8pt; display: inline-block; width:80px; text-align: center;">&nbsp;Online Patient<br>&nbsp;Records</div></div></div>	

</div>



</body>
</html>

Open in new window

damianb123Asked:
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.

Ray PaseurCommented:
You can set a cookie.  The cookie can be used by the server to generate stable and repeatable CSS settings.  The cookie can have an expiration of zero, meaning that it will not be returned after the browser is closed.

This whole process will be a lot simpler if you use CSS styling with named classes instead of explicit inline styles!
Ray PaseurCommented:
Here's an example using the PHP session to store the "width" information.  First, the server-side script that receives the AJAX request and modifies the PHP session.
<?php // demo/temp_damianb123_server.php
/**
 * http://www.experts-exchange.com/questions/28932666/Need-help-getting-an-expanded-column-to-remain-expanded-on-refresh.html
 */
error_reporting(E_ALL);

session_start();
$_SESSION['width'] = 720;
session_write_close();
echo 'Session "width" has been stored';

Open in new window

Next the client-side script that sends the signal to the server.
<?php // demo/temp_damianb123.php
/**
 * http://www.experts-exchange.com/questions/28932666/Need-help-getting-an-expanded-column-to-remain-expanded-on-refresh.html
 */
error_reporting(E_ALL);
session_start();

// IF THERE IS A SESSION SETTING
if (!empty($_SESSION['width']))
{
    $msg = '<b><i>The "width" session is in play.</i></b>';
}
else
{
    $msg = 'The "width" session has not been set yet.';
}


// CREATE OUR WEB PAGE IN HTML5 FORMAT
$htm = <<<HTML5
<!DOCTYPE html>
<html dir="ltr" lang="en-US">
<head>
<meta charset="utf-8" />
<meta name="robots" content="noindex, nofollow" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<style type="text/css">
/* STYLE SHEET HERE */
</style>

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script>
$(document).ready(function(){
    $("#wclick").click(function(){
        $.get("temp_damianb123_server.php", function(response){
            alert(response);
        });
    });
});
</script>

<title>HTML5 Page With jQuery in UTF-8 Encoding</title>
</head>
<body>

<noscript>Your browsing experience will be much better with JavaScript enabled!</noscript>

<p>$msg</p>
<p>Refresh your browser now, then click the button.</p>
<input id="wclick" type="button" value="Click Here to Set Width in the PHP Session" />
<p>Then refresh your browser, or close and reopen the browser.</p>

</body>
</html>
HTML5;


// RENDER THE WEB PAGE
echo $htm;

Open in new window

see how it works here: http://iconoun.com/demo/temp_damianb123.php

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
damianb123Author Commented:
Thanks Ray,
       Having played around with localstorage, I am trying your solution using cookies.  Your example is excellent and does what I require by remembering on refresh the value - however I just can't think how I can integrate this into the code I supplied.

I don't suppose you can point me in the right direction/guide me through setting this up to remember the clicked CSS width?

Thanks for your help.

Damian
Your Guide to Achieving IT Business Success

The IT Service Excellence Tool Kit has best practices to keep your clients happy and business booming. Inside, you’ll find everything you need to increase client satisfaction and retention, become more competitive, and increase your overall success.

Ray PaseurCommented:
I think your instincts are good about localStorage, and now that I look at this reference, I think I would choose that over my suggestion for cookies!
http://www.w3schools.com/html/html5_webstorage.asp

I'll see if I can come up with an example...
Ray PaseurCommented:
Please see: http://iconoun.com/demo/temp_damianb123.php
<!DOCTYPE html>

<!--
demo/temp_damianb123.php
http://www.experts-exchange.com/questions/28932666/Need-help-getting-an-expanded-column-to-remain-expanded-on-refresh.html
http://www.w3schools.com/html/html5_webstorage.asp
-->

<html dir="ltr" lang="en-US">
<head>
<meta charset="utf-8" />
<meta name="robots" content="noindex, nofollow" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<style type="text/css">
.phat {
    width:720px;
}
.thin {
    width:144px;
}
.gone {
    width:0px;
    visibility:hidden:
}
.blok {
    display:inline-block;
}
</style>

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script>
$(document).ready(function(){

    // INITIAL PAGE CONFIGURATION
    wide = sessionStorage.getItem("wide");
    if (wide != 1) {
        sessionStorage.setItem("wide", 0);
        $("#rite").removeClass("gone").addClass("thin");
        $("#midl").removeClass("gone").addClass("thin");
        $("#left").removeClass("phat").addClass("thin");
    } else {
        $("#rite").removeClass("thin").addClass("gone");
        $("#midl").removeClass("thin").addClass("gone");
        $("#left").removeClass("thin").addClass("phat");
    }

    // CHANGE PAGE CONFIGURATION
    $("#wclick").click(function(){
        wide = sessionStorage.getItem("wide");
        if (wide == 1) {
            sessionStorage.setItem("wide", 0);
            $("#rite").removeClass("gone").addClass("thin");
            $("#midl").removeClass("gone").addClass("thin");
            $("#left").removeClass("phat").addClass("thin");
        } else {
            sessionStorage.setItem("wide", 1);
            $("#rite").removeClass("thin").addClass("gone");
            $("#midl").removeClass("thin").addClass("gone");
            $("#left").removeClass("thin").addClass("phat");
        }
    });
});
</script>

<title>Remember Settings for Expanded Column</title>
</head>
<body>

<noscript>Your browsing experience will be much better with JavaScript enabled!</noscript>

<p>Refresh your browser now, then click the button.</p>
<input id="wclick" type="button" value="Click Here to Toggle Widths" />
<p>Then refresh your browser, or close and reopen the browser.</p>
<span id="left" class="blok">One</span>
<span id="midl" class="blok">Two</span>
<span id="rite" class="blok">Tre</span>

</body>
</html>

Open in new window

Slick812Commented:
greetings damianb123, you can get a Jquery Cookie add-on here -
        https://github.com/carhartl/jquery-cookie
if you download the entire .ZIP file, all you need for this is the -
    jquery.cookie.js
file, the other things in it are for Demos and Test pages - You set a cookie with -
    $.cookie('bookexp720',"144");
which set a Value of  "144" to the   'bookexp720' Cookie.

to READ a cookie you just have the Cookie Name -
     if ($.cookie('bookexp720') == '144'){

page code below -
<!doctype html>
<html>
<head>
<meta http-equiv="Content-Language" content="en-gb">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>Search Results</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="jquery.cookie.js"></script>
<script type='text/javascript'>

$(document).ready(function() { 
if ($.cookie('bookexp720') == '144'){
  $('#bookexp').css('width','720px');
  $('#bookexp').removeClass('bg3').addClass('bg4');
  $('#contactexp').css('width','0px');
  $('#arrivalexp').css('width','0px');
  $('#clinicalexp').css('width','0px');
  $('#followupexp').css('width','0px');
  }
  
$('#expand').click(function () { 
switch($('#bookexp').css('width') ) { 
case '144px':
        $.cookie('bookexp720',"144");
        $('#bookexp').css('width','720px');
        $('#bookexp').removeClass('bg3').addClass('bg4');
        $('#contactexp').css('width','0px');
        $('#arrivalexp').css('width','0px');
        $('#clinicalexp').css('width','0px');
        $('#followupexp').css('width','0px');		        
break; 

case '720px':
        $.cookie('bookexp720',"720");
        $('#bookexp').css('width','144px');
        $('#bookexp').removeClass('bg4').addClass('bg3');
        $('#contactexp').css('width','144px');
        $('#arrivalexp').css('width','144px');
        $('#clinicalexp').css('width','144px');
        $('#followupexp').css('width','144px');
break; 
}

});

});



</script>
</head>
<body>
<div id="container">
<div align="center">
<div style="width: 1000px; margin-top: 355px;">

<div style="float: left; width: 50px; font-size: 7pt; font-family:Arial; text-align: center; height: 100px;"><div style="margin-bottom: 10px;">&nbsp;</div></div>
		<div id="bookexp" class="bg3" style="background-color: #c7ee9d; height: 100px; float: left; width: 144px; font-family:Arial; color: #000; font-size: 12pt; font-weight:bold; text-align: left; overflow: hidden;"><div style="display: block;" id="expand"><div style="margin-top: 15px;">&nbsp;Bookings</div><div style="margin-top: 35px; width:72px; font-family:Arial; font-size: 8pt; display: inline-block; overflow: hidden; text-align: center; vertical-align:bottom;">&nbsp;Consultation<br>&nbsp;Hours</div><div style="margin-top: 35px; font-family:Arial; font-size: 8pt; display: inline-block; width:72px; text-align: center;">&nbsp;Evening<br>&nbsp;Opening</div><div style="margin-top: 35px; font-family:Arial; font-size: 8pt; display: inline-block; width:72px; text-align: center;">&nbsp;Early<br>&nbsp;Mornings</div><div style="margin-top: 20px; font-family:Arial; font-size: 8pt; display: inline-block; width:72px; text-align: center;">&nbsp;Weekend<br>&nbsp;Opening</div><div style="margin-top: 20px; font-family:Arial; font-size: 8pt; display: inline-block; width:72px; text-align: center;">&nbsp;Online Appt<br>&nbsp;booking</div><div style="margin-bottom: 0px; font-family:Arial; font-size: 8pt; display: inline-block; width:72px; text-align: center;">&nbsp;Booking <br>&nbsp;Timescale</div><div style="margin-bottom: 0px; font-family:Arial; font-size: 8pt; display: inline-block; width:72px; text-align: center;">&nbsp;Advance<br>&nbsp;Booking</div><div style="margin-bottom: 0px; font-family:Arial; font-size: 8pt; display: inline-block; width:72px; text-align: center; vertical-align: top; margin-top:35px;">&nbsp;Sit & Wait</div><div style="margin-bottom: 0px; font-family:Arial; font-size: 8pt; display: inline-block; width:72px; text-align: center;">&nbsp;Text<br>&nbsp;Reminders</div></div></div></div>
		<div id="contactexp" class="bg1" style="background-color: #F495C7; height: 100px; float: left; width: 144px; font-family:Arial; color: #000; font-size: 12pt; font-weight:bold; text-align: left; overflow: hidden;"><div style="display: block;" id="expand4"><div style="margin-top: 15px;">&nbsp;Contact</div><div style="margin-top: 35px; width:72px; font-family:Arial; font-size: 8pt; display: inline-block; overflow: hidden; text-align: center; vertical-align:bottom;">&nbsp;Phone<br>&nbsp;Advice</div><div style="margin-top: 35px; font-family:Arial; font-size: 8pt; display: inline-block; width:72px; text-align: center;">&nbsp;Skype<br>&nbsp;Advice</div><div style="margin-top: 35px; font-family:Arial; font-size: 8pt; display: inline-block; width:72px; text-align: center;">&nbsp;Male<br>Doctors</div><div style="margin-top: 20px; font-family:Arial; font-size: 8pt; display: inline-block; width:72px; text-align: center;">&nbsp;Female<br>Doctors</div><div style="margin-top: 20px; font-family:Arial; font-size: 8pt; display: inline-block; width:72px; text-align: center;">&nbsp;Ltd Appt<br>&nbsp;Length</div><div style="margin-bottom: 0px; font-family:Arial; font-size: 8pt; display: inline-block; width:72px; text-align: center;">&nbsp;1 Issue<br>&nbsp;Per Appt</div><div style="margin-bottom: 0px; font-family:Arial; font-size: 7.5pt; display: inline-block; width:72px; text-align: center;">&nbsp;Book Multiple<br>&nbsp;Appointments</div></div></div></div>
		<div id="arrivalexp" class="bg3" style="background-color: #c7ee9d; height: 100px; float: left; width: 144px; font-family:Arial; color: #000;  font-size: 12pt; font-weight:bold; text-align: left; overflow: hidden;"><div style="display: block;" id="expand1"><div style="margin-top: 16px;">&nbsp;Arrival &<br>&nbsp;Waiting</div><div style="margin-top: 15px; width:72px; font-family:Arial; font-size: 8pt; display: inline-block; overflow: hidden; text-align: center; vertical-align:bottom; vertical-align: top; margin-top:15px;">&nbsp;Parking</div><div style="margin-top: 15px; font-family:Arial; font-size: 8pt; display: inline-block; width:72px; text-align: center;">&nbsp;Disabled<br>&nbsp;Parking</div><div style="margin-top: 15px; font-family:Arial; font-size: 8pt; display: inline-block; width:72px; text-align: center;">&nbsp;Average<br>Wait Time</div><div style="margin-top: 15px; font-family:Arial; font-size: 8pt; display: inline-block; width:72px; text-align: center;">&nbsp;Interpretation<br>&nbsp;Services</div><div style="margin-top: 15px; font-family:Arial; font-size: 8pt; display: inline-block; width:72px; text-align: center;">&nbspPic of<br>&nbsp;Surgery</div><div style="margin-top: 15px; font-family:Arial; font-size: 8pt; display: inline-block; width:72px; text-align: center;">&nbsp;Wheelchair<br>&nbsp;Access</div></div></div>
        <div id="clinicalexp" class="bg1" style="background-color: #F495C7; height: 100px; float: left; width: 144px; font-family:Arial; color: #000;  font-size: 12pt; font-weight:bold; text-align: left; overflow: hidden;"><div style="display: block;" id="expand2"><div style="margin-top: 16px;">&nbsp;Clinical <br>&nbsp;Services</div><div style="margin-top: 15px; width:72px; font-family:Arial; font-size: 8pt; display: inline-block; overflow: hidden; text-align: center; vertical-align:bottom;">&nbsp;Bloods<br>&nbsp;Onsite</div><div style="margin-top: 15px; font-family:Arial; font-size: 8pt; display: inline-block; width:72px; text-align:center;">&nbsp;Specialist<br>&nbsp;Services</div></div></div>
        <div id="followupexp" class="bg3" style="background-color: #c7ee9d; height: 100px; float: left; width: 144px; font-family:Arial; color: #000;  font-size: 12pt; font-weight:bold; text-align: left; overflow: hidden;"><div style="display: block;" id="expand3"><div style="margin-top: 16px;">&nbsp;Follow-up &<br>&nbsp;Support</div><div style="margin-top: 15px; width:72px; font-family:Arial; font-size: 8pt; display: inline-block; overflow: hidden; text-align: center; vertical-align:bottom;">&nbsp;Repeat<br>&nbsp;Prescrip</div><div style="margin-top: 15px; font-family:Arial; font-size: 8pt; display: inline-block; width:72px; text-align: center;">&nbsp;Online<br>&nbsp;Prescrip</div><div style="margin-top: 15px; font-family:Arial; font-size: 8pt; display: inline-block; width:72px; text-align: center;">&nbsp;Onsite<br>&nbsp;Pharmacy</div><div style="margin-top: 15px; font-family:Arial; font-size: 8pt; display: inline-block; width:72px; text-align: center;">&nbsp;Online<br>&nbsp;Test Results</div><div style="margin-top: 15px; font-family:Arial; font-size: 8pt; display: inline-block; width:80px; text-align: center;">&nbsp;Online Patient<br>&nbsp;Records</div></div></div>
</div>
</body>
</html>

Open in new window

damianb123Author Commented:
Hi Slick812,
        I have your routine working, and it works well.  The only issue is...... if I expand a column, then go to the page before this one, which is a search page, when the search is performed and the user comes back to this page - the column is still open.

What I could do with doing is checking if the cookie exists on the first page, and destroying it - so in every eventuality, when the search is performed and the user goes to the page with this code on - the columns will always be contracted....

is that possible?
Slick812Commented:
You have the code to set a cookie in the browser with -
         $.cookie('bookexp720',"144");

and on any page you can remove a cookie with -
        $.removeCookie('bookexp720');

you do not really have to see if the cookie exists first, when you use $.removeCookie( )  it will do all of that in it's processes, so on the search page just have the  jquery cookie JS file and then use the removeCookie -
<script src="jquery.cookie.js"></script>
<script>$.removeCookie('bookexp720');</script>

Open in new window


and of course you must have the regular Jquery file loaded above the cookie JS file.
Slick812Commented:
This following code I did can help you, when I looked at your code again because of your last comment, the CSS you use for the expander block, was overwhelming in the way you tried to do it, it is bad page formatting to use a style=" "  in all of the different <div> you have, you need to use the   class=" ", or a sub element CSS in the style sheet.
 and ALSO, you have several expander blocks, like  "Contact" and "Arrival & Waiting", so I redid the javascript to have each expander block, expand on user touch, this stores a cookie, but uses the expander block ID to keep that block open on a page reload.

<!doctype html><html>
<head>
<meta http-equiv="Content-Language" content="en-gb">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>Search Results</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="jquery.cookie.js"></script>
<script type='text/javascript'>

$(document).ready(function() {

$(".expClk").click(function () {
  var eClk = this, sho = 0;
if($(eClk).css('width') == '670px') {
  $(eClk).css('width','148px');
  $(eClk).css('marginLeft','0');
  sho=1;
  $.removeCookie('expando');
  } else {
  $(eClk).css('width','670px');
  $(eClk).css('marginLeft','35px');
  $.cookie('expando', eClk.id);
  //alert('Cookie is = '+$.cookie('expando'));
  }
$( ".expClk" ).each(function( index, element ) {
  if(element.id != eClk.id) {
  if(sho) $(element).show(); else $(element).hide();
  }
});
  });
  
if ($.cookie('expando')) {
  $("#"+$.cookie('expando')).click();
}

});
</script>
<style>
#container {
  width: 1018px;
  margin: 0 auto;
  padding: 5px;
  border: 2px dotted #c88;
  border-radius: 0.7em;
  }
  
.expandO {
  width: 742px;
  height: 100px;
  margin: 4px auto;
  }

.expClk {
  height: 100px;
  float: left;
  width: 148px;
  font-family:Arial;
  color: #000;
  font-size: 12pt;
  font-weight:bold;
  text-align: center;
  overflow: hidden;
  cursor: pointer;
  }
  
 #bookexp, #arrivalexp, #followupexp {
  background-color: #c7ee9d;
  }
  
#contactexp, #clinicalexp {
  background-color: #F495C7;
  }
  
.subIn {
  width:73px;
  font-family:Arial;
  font-size: 8pt;
  display: inline-block;
  vertical-align:top;
  margin-top: 5px;
  }
</style>
</head>
<body>
<div id="container">
<div style="height: 350px; text-align: center; border: 1px dashed #88c; font-size: 122%; padding: 8px; margin: 4px;">TOP CONTENT</div>

Touch - Click a Catagory Below for more listings
<div class="expandO">
 <div id="bookexp" class="expClk">
 <div style="margin-top: 15px;">Bookings</div>
 <div style="margin-top: 1.8em; text-align: center;">
 <div class="subIn" style="overflow: hidden;">Consultation<br>Hours</div><div class="subIn">Evening<br>Opening</div><div class="subIn">&nbsp;Early<br>Mornings</div><div class="subIn">Weekend<br>Opening</div><div class="subIn">Online Appt<br>booking</div><div class="subIn">Booking <br>Timescale</div><div class="subIn">Advance<br>Booking</div><div class="subIn">Sit & Wait</div><div class="subIn">Text<br>Reminders</div>
 </div>
 </div>

<div id="contactexp" class="expClk leftHide">
<div style="margin-top: 15px;">Contact</div>
 <div style="margin-top: 1.8em; text-align: center;">
<div class="subIn">Phone<br>Advice</div><div class="subIn">Skype<br>Advice</div><div class="subIn">Male<br>Doctors</div><div class="subIn">Female<br>Doctors</div><div class="subIn">Ltd Appt<br>Length</div><div class="subIn">1 Issue<br>Per Appt</div><div class="subIn">Book Multiple<br>Appointments</div>
</div>
</div>

<div id="arrivalexp" class="expClk leftHide">
<div style="margin-top: 16px;">Arrival &<br>Waiting</div>
 <div style="margin-top: 0.5em; text-align: center;">
<div class="subIn">Parking</div><div class="subIn">Disabled<br>Parking</div><div class="subIn">Average<br>Wait Time</div><div class="subIn">Interpretation<br>subInls</div><div class="subIn">Pic of<br>Surgery</div><div class="subIn">Wheelchair<br></div>
</div>
</div>
<div id="clinicalexp" class="expClk leftHide">
<div style="margin-top: 16px;">Clinical <br>subInls</div>
<div style="margin-top: 0.5em; text-align: center;">
<div class="subIn">Bloods<br>Onsite</div><div class="subIn">Specialist<br>subInls</div>
</div>
</div>
<div id="followupexp" class="expClk leftHide">
<div style="margin-top: 16px;">Follow-up &<br>Support</div>
<div style="margin-top: 0.5em; text-align: center;">
<div class="subIn">Repeat<br>Prescrip</div><div class="subIn">Online<br>Prescrip</div><div class="subIn">Onsite<br>Pharmacy</div><div class="subIn">Online<br>Test Results</div><div class="subIn">Online Patient<br>Records</div>
</div>
</div>
<br style="clear: both;" />		
</div>


<div id="bc" style="height: 150px; text-align: center; border: 1px dashed #88c; font-size: 122%; padding: 8px; margin: 4px;">BOTTOM CONTENT</div>
</div>
</body>
</html>

Open in new window



I had to reformat the page to be more like a web page setup, but please consider the way I did the <style>  using class=" " in the <div>
Ray PaseurCommented:
Sorry, I must have misunderstood.  I thought you wanted the columns to retain state, either wide or narrow, across page reloads, until the browser was closed.  Do you want the columns to always start in the narrow state after every page reload?
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
PHP

From novice to tech pro — start learning today.