| home / programming / css_content / 1 |   [previous] |
|
|
|
Under Internet Explorer 5 and later, it's possible to save the current session's expand/collapse state. Persistence is achieved through a combination of a meta tag and style rule, and lasts for the lifetime of the browser window. For all the details, visit Microsoft's MSDN library.
Add the following to the head section of any page where you want persistence:
<meta name="save" content="history" />
Add the following definition, then apply as needed:
.save{
behavior:url(#default#savehistory);}
...
<div class="save">
<h1><a href="javascript:void(0)" class="dsphead"
onclick="dsp(this)">
<span class="dspchar">+</span> heading</a></h1>
<div class="dspcont">section</div>
...
</div>
It's best to reserve the save class for sections of expand/collapse content, and not apply it to the entire page. That's because any updates to dynamic content, or even edits during development, won't be displayed until the browser window is closed and reopened.
To help you get started with expandable content, here's complete, copy and paste code for the example we've been building. Multiply sections as needed, fill them in with real content, and watch how cumbersome slabs of text become nimble and easy on the eye.
<html><head>
<title></title>
<meta name="save" content="history" />
<style type="text/css"><!--
.save{
behavior:url(#default#savehistory);}
a.dsphead{
text-decoration:none;
margin-left:1.5em;}
a.dsphead:hover{
text-decoration:underline;}
a.dsphead span.dspchar{
font-family:monospace;
font-weight:normal;}
.dspcont{
display:none;
margin-left:1.5em;}
//--></style>
<script type="text/javascript"><!--
function dsp(loc){
if(document.getElementById){
var foc=loc.firstChild;
foc=loc.firstChild.innerHTML?
loc.firstChild:
loc.firstChild.nextSibling;
foc.innerHTML=foc.innerHTML=='+'?'-':'+';
foc=loc.parentNode.nextSibling.style?
loc.parentNode.nextSibling:
loc.parentNode.nextSibling.nextSibling;
foc.style.display=foc.style.display=='block'?'none':'block';}}
if(!document.getElementById)
document.write('<style type="text/css"><!--\n'+
'.dspcont{display:block;}\n'+
'//--></style>');
//--></script>
<noscript>
<style type="text/css"><!--
.dspcont{display:block;}
//--></style>
</noscript>
</head><body>
<div class="save">
<h1><a href="javascript:void(0)" class="dsphead"
onclick="dsp(this)">
<span class="dspchar">+</span> heading</a></h1>
<div class="dspcont">section</div>
<h1><a href="javascript:void(0)" class="dsphead"
onclick="dsp(this)">
<span class="dspchar">+</span> heading</a></h1>
<div class="dspcont">
<h2><a href="javascript:void(0)" class="dsphead"
onclick="dsp(this)">
<span class="dsphead">+</span> heading</a></h2>
<div class="dspcont">section</div>
<h2><a href="javascript:void(0)" class="dsphead"
onclick="dsp(this)">
<span class="dspchar">+</span> heading</a></h2>
<div class="dspcont">section</div>
</div>
</div>
</body></html>
M. C. Matti is a usability analyst at SAS, working on Web-based business intelligence applications. He's also the owner of matti.net. Send him a note at mimatt@sas.com.
| home / programming / css_content / 1 | [previous] |
Legal Notices, Licensing, Permissions, Privacy Policy.
Advertise | Newsletters | Shopping | E-mail Offers | Freelance Jobs 
Created: March 27, 2003
Revised: June 26, 2003
URL: http://webreference.com/programming/css_content/1
