troubleshooting Question
Need help getting an expanded column to remain expanded on refresh
damianb123
asked on
asked 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
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>
The Value of Experts Exchange in My Daily IT Life
Experts Exchange (EE) has become my company's go-to resource to get answers. I've used EE to make decisions, solve problems and even save customers. OutagesIO has been a challenging project and... Keep reading >>
Mike
Owner of Outages.IO
Phoenix, Arizona, United States
Member Since 2016
Join a full scale community that combines the best parts of other tools into one platform.
Unlock 2 Answers and 10 Comments.
View membership options“All of life is about relationships, and EE has made a virtual community a real community. It lifts everyone's boat.”
William Peck
Member since 2004
Our community of experts have been thoroughly vetted for their expertise and industry experience.
The Most Valuable Expert award recognizes technology experts who passionately share their knowledge with the community, demonstrate the core values of this platform, and go the extra mile in all aspects of their contributions. This award is based off of nominations by EE users and experts. Multiple MVEs may be awarded each year.
This award recognizes an author who contributes the highest volume of original works or content. Recipients of this award produce extremely valuable content that prioritizes accuracy, relevancy, and professionalism.