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!
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
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;"> </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;"> 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;"> Consultation<br> Hours</div><div style="margin-top: 35px; font-family:Arial; font-size: 8pt; display: inline-block; width:72px; text-align: center;"> Evening<br> Opening</div><div style="margin-top: 35px; font-family:Arial; font-size: 8pt; display: inline-block; width:72px; text-align: center;"> Early<br> Mornings</div><div style="margin-top: 20px; font-family:Arial; font-size: 8pt; display: inline-block; width:72px; text-align: center;"> Weekend<br> Opening</div><div style="margin-top: 20px; font-family:Arial; font-size: 8pt; display: inline-block; width:72px; text-align: center;"> Online Appt<br> booking</div><div style="margin-bottom: 0px; font-family:Arial; font-size: 8pt; display: inline-block; width:72px; text-align: center;"> Booking <br> Timescale</div><div style="margin-bottom: 0px; font-family:Arial; font-size: 8pt; display: inline-block; width:72px; text-align: center;"> Advance<br> 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;"> Sit & Wait</div><div style="margin-bottom: 0px; font-family:Arial; font-size: 8pt; display: inline-block; width:72px; text-align: center;"> Text<br> 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;"> 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;"> Phone<br> Advice</div><div style="margin-top: 35px; font-family:Arial; font-size: 8pt; display: inline-block; width:72px; text-align: center;"> Skype<br> Advice</div><div style="margin-top: 35px; font-family:Arial; font-size: 8pt; display: inline-block; width:72px; text-align: center;"> Male<br>Doctors</div><div style="margin-top: 20px; font-family:Arial; font-size: 8pt; display: inline-block; width:72px; text-align: center;"> Female<br>Doctors</div><div style="margin-top: 20px; font-family:Arial; font-size: 8pt; display: inline-block; width:72px; text-align: center;"> Ltd Appt<br> Length</div><div style="margin-bottom: 0px; font-family:Arial; font-size: 8pt; display: inline-block; width:72px; text-align: center;"> 1 Issue<br> Per Appt</div><div style="margin-bottom: 0px; font-family:Arial; font-size: 7.5pt; display: inline-block; width:72px; text-align: center;"> Book Multiple<br> 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;"> Arrival &<br> 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;"> Parking</div><div style="margin-top: 15px; font-family:Arial; font-size: 8pt; display: inline-block; width:72px; text-align: center;"> Disabled<br> Parking</div><div style="margin-top: 15px; font-family:Arial; font-size: 8pt; display: inline-block; width:72px; text-align: center;"> Average<br>Wait Time</div><div style="margin-top: 15px; font-family:Arial; font-size: 8pt; display: inline-block; width:72px; text-align: center;"> Interpretation<br> Services</div><div style="margin-top: 15px; font-family:Arial; font-size: 8pt; display: inline-block; width:72px; text-align: center;"> Pic of<br> Surgery</div><div style="margin-top: 15px; font-family:Arial; font-size: 8pt; display: inline-block; width:72px; text-align: center;"> Wheelchair<br> 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;"> Clinical <br> 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;"> Bloods<br> Onsite</div><div style="margin-top: 15px; font-family:Arial; font-size: 8pt; display: inline-block; width:72px; text-align:center;"> Specialist<br> 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;"> Follow-up &<br> 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;"> Repeat<br> Prescrip</div><div style="margin-top: 15px; font-family:Arial; font-size: 8pt; display: inline-block; width:72px; text-align: center;"> Online<br> Prescrip</div><div style="margin-top: 15px; font-family:Arial; font-size: 8pt; display: inline-block; width:72px; text-align: center;"> Onsite<br> Pharmacy</div><div style="margin-top: 15px; font-family:Arial; font-size: 8pt; display: inline-block; width:72px; text-align: center;"> Online<br> Test Results</div><div style="margin-top: 15px; font-family:Arial; font-size: 8pt; display: inline-block; width:80px; text-align: center;"> Online Patient<br> Records</div></div></div>
</div>
</body>
</html>
Do more with
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
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!
This whole process will be a lot simpler if you use CSS styling with named classes instead of explicit inline styles!
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';
<?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;
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
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
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...
http://www.w3schools.com/html/html5_webstorage.asp
I'll see if I can come up with an example...
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>
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 -
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;"> </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;"> 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;"> Consultation<br> Hours</div><div style="margin-top: 35px; font-family:Arial; font-size: 8pt; display: inline-block; width:72px; text-align: center;"> Evening<br> Opening</div><div style="margin-top: 35px; font-family:Arial; font-size: 8pt; display: inline-block; width:72px; text-align: center;"> Early<br> Mornings</div><div style="margin-top: 20px; font-family:Arial; font-size: 8pt; display: inline-block; width:72px; text-align: center;"> Weekend<br> Opening</div><div style="margin-top: 20px; font-family:Arial; font-size: 8pt; display: inline-block; width:72px; text-align: center;"> Online Appt<br> booking</div><div style="margin-bottom: 0px; font-family:Arial; font-size: 8pt; display: inline-block; width:72px; text-align: center;"> Booking <br> Timescale</div><div style="margin-bottom: 0px; font-family:Arial; font-size: 8pt; display: inline-block; width:72px; text-align: center;"> Advance<br> 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;"> Sit & Wait</div><div style="margin-bottom: 0px; font-family:Arial; font-size: 8pt; display: inline-block; width:72px; text-align: center;"> Text<br> 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;"> 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;"> Phone<br> Advice</div><div style="margin-top: 35px; font-family:Arial; font-size: 8pt; display: inline-block; width:72px; text-align: center;"> Skype<br> Advice</div><div style="margin-top: 35px; font-family:Arial; font-size: 8pt; display: inline-block; width:72px; text-align: center;"> Male<br>Doctors</div><div style="margin-top: 20px; font-family:Arial; font-size: 8pt; display: inline-block; width:72px; text-align: center;"> Female<br>Doctors</div><div style="margin-top: 20px; font-family:Arial; font-size: 8pt; display: inline-block; width:72px; text-align: center;"> Ltd Appt<br> Length</div><div style="margin-bottom: 0px; font-family:Arial; font-size: 8pt; display: inline-block; width:72px; text-align: center;"> 1 Issue<br> Per Appt</div><div style="margin-bottom: 0px; font-family:Arial; font-size: 7.5pt; display: inline-block; width:72px; text-align: center;"> Book Multiple<br> 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;"> Arrival &<br> 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;"> Parking</div><div style="margin-top: 15px; font-family:Arial; font-size: 8pt; display: inline-block; width:72px; text-align: center;"> Disabled<br> Parking</div><div style="margin-top: 15px; font-family:Arial; font-size: 8pt; display: inline-block; width:72px; text-align: center;"> Average<br>Wait Time</div><div style="margin-top: 15px; font-family:Arial; font-size: 8pt; display: inline-block; width:72px; text-align: center;"> Interpretation<br> Services</div><div style="margin-top: 15px; font-family:Arial; font-size: 8pt; display: inline-block; width:72px; text-align: center;"> Pic of<br> Surgery</div><div style="margin-top: 15px; font-family:Arial; font-size: 8pt; display: inline-block; width:72px; text-align: center;"> Wheelchair<br> 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;"> Clinical <br> 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;"> Bloods<br> Onsite</div><div style="margin-top: 15px; font-family:Arial; font-size: 8pt; display: inline-block; width:72px; text-align:center;"> Specialist<br> 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;"> Follow-up &<br> 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;"> Repeat<br> Prescrip</div><div style="margin-top: 15px; font-family:Arial; font-size: 8pt; display: inline-block; width:72px; text-align: center;"> Online<br> Prescrip</div><div style="margin-top: 15px; font-family:Arial; font-size: 8pt; display: inline-block; width:72px; text-align: center;"> Onsite<br> Pharmacy</div><div style="margin-top: 15px; font-family:Arial; font-size: 8pt; display: inline-block; width:72px; text-align: center;"> Online<br> Test Results</div><div style="margin-top: 15px; font-family:Arial; font-size: 8pt; display: inline-block; width:80px; text-align: center;"> Online Patient<br> Records</div></div></div>
</div>
</body>
</html>
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?
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 -
and of course you must have the regular Jquery file loaded above the cookie JS file.
$.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>
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.
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>
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"> 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>
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>
Premium Content
You need an Expert Office subscription to comment.Start Free Trial