Link to home
Start Free TrialLog in
Avatar of damianb123
damianb123Flag for United Kingdom of Great Britain and Northern Ireland

asked on

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

Avatar of Ray Paseur
Ray Paseur
Flag of United States of America image

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!
ASKER CERTIFIED SOLUTION
Avatar of Ray Paseur
Ray Paseur
Flag of United States of America image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of damianb123

ASKER

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

SOLUTION
Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
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>
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?