danielck
04-15-2005, 01:51 AM
Hi everyone,
I obtain a code to create a collapsible sidebar for my website layout from here: http://www.depiction.net/?id=csssidebar
I have successfully implemented it but I would like to add cookies to it so that it can remember the state. I tried my best but due to my limited knowledge in programming, I could not figure out how to do it.
Would be grateful if anyone can assist:
<script type="text/javascript">
<!--
// begin function.
function toggle() {
// Initialize our object data from our XHTML divs.
var bar = document.getElementById('sidebar');
var barText = document.getElementById('sbText');
var box = document.getElementById('content');
// If the sidebar is expanded...
if (bar.style.width == '250px') {
// Collapse it by setting its width to 15px
bar.style.width = '15px';
// Hide the sbText div so that its text isn't visible or
// repositioned.
barText.style.display = 'none';
// Resize the content div to its new, expanded width.
box.style.width = '720px';
// Otherwise, if the sidebar is already collapsed...
} else {
// Restore the width of the sidebar.
bar.style.width = '250px';
// Make the sbText div visible again.
barText.style.display = 'block';
// Set the content div width back to original size.
box.style.width = '500px';
}
}
// -->
</script>
Thanks in advance!
I obtain a code to create a collapsible sidebar for my website layout from here: http://www.depiction.net/?id=csssidebar
I have successfully implemented it but I would like to add cookies to it so that it can remember the state. I tried my best but due to my limited knowledge in programming, I could not figure out how to do it.
Would be grateful if anyone can assist:
<script type="text/javascript">
<!--
// begin function.
function toggle() {
// Initialize our object data from our XHTML divs.
var bar = document.getElementById('sidebar');
var barText = document.getElementById('sbText');
var box = document.getElementById('content');
// If the sidebar is expanded...
if (bar.style.width == '250px') {
// Collapse it by setting its width to 15px
bar.style.width = '15px';
// Hide the sbText div so that its text isn't visible or
// repositioned.
barText.style.display = 'none';
// Resize the content div to its new, expanded width.
box.style.width = '720px';
// Otherwise, if the sidebar is already collapsed...
} else {
// Restore the width of the sidebar.
bar.style.width = '250px';
// Make the sbText div visible again.
barText.style.display = 'block';
// Set the content div width back to original size.
box.style.width = '500px';
}
}
// -->
</script>
Thanks in advance!