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: 2016-03-12

Who is Participating?

Experts Exchange Solution brought to you by

Enjoy your complimentary solution view.

Get this solution by purchasing an Individual license! Start your 7-day free trial.

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.

LVL 111

Ray PaseurCommented: 2016-03-12

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!

LVL 111

Ray PaseurCommented: 2016-03-12

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: 2016-03-13

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

LVL 111

Ray PaseurCommented: 2016-03-13

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

LVL 111

Ray PaseurCommented: 2016-03-13

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

LVL 35

Slick812Commented: 2016-03-13

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: 2016-03-16

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?

LVL 35

Slick812Commented: 2016-03-16

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.

LVL 35

Slick812Commented: 2016-03-16

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>

LVL 111

Ray PaseurCommented: 2016-03-16

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.

Web Development

By:

Gregor Dzierzon

Angular Fundamentals

i

Members can enroll in this course at no extra cost.

50 lessons
Web Development

By:

Adam Barney

Bootstrap 3.1: Fundamentals

i

Members can enroll in this course at no extra cost.

70 lessons
Web Development

By:

Adam Barney

Bootstrap 3.1: Fundamentals

i

Members can enroll in this course at no extra cost.

70 lessons
HTML

By:

Sandra Batakis

Certification
Certification: MCSA MCSE Microsoft Certified Solutions Associate & …

i

Members can enroll in this course at no extra cost.

435 lessons
Web Development

By:

Alex Garrett

Fundamentals of Javascript

i

Members can enroll in this course at no extra cost.

33 lessons
Web Development

By:

John Ulliman

HTML5 and CSS3 Fundamentals

i

Members can enroll in this course at no extra cost.

42 lessons
Web Development

By:

John Ulliman

HTML5 and CSS3 Fundamentals

i

Members can enroll in this course at no extra cost.

42 lessons
Web Development

By:

Alex Garrett

Introduction to Web Design

i

Members can enroll in this course at no extra cost.

41 lessons
Programming

By:

Brett Hooper

JavaScript Best Practices

i

Members can enroll in this course at no extra cost.

12 lessons
Programming

By:

Brett Hooper

JavaScript Best Practices

i

Members can enroll in this course at no extra cost.

12 lessons