Need help getting an expanded column to remain expanded on refresh

damianb123
damianb123 used Ask the Experts™
on
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

Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Most Valuable Expert 2011
Top Expert 2016

Commented:
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!
Most Valuable Expert 2011
Top Expert 2016
Commented:
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

Author

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
Ensure you’re charging the right price for your IT

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

Most Valuable Expert 2011
Top Expert 2016

Commented:
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...
Most Valuable Expert 2011
Top Expert 2016

Commented:
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

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

Author

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?
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.
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>
Most Valuable Expert 2011
Top Expert 2016

Commented:
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?

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial