Tutorials > CSS > Expanding / Collapsing Sidebar Page 3
The JavaScript:
Get ready to do a little more math here. We know the width of our content div when the sidebar is expanded should be 429px. Now we need to determine what its width will be when the sidebar is collapsed. To do thhis, we must first know the width of the collapsed sidebar. Again, we can choose any value we like (it should be relatively small, though). I'm using 15px.
So, the formula for our width with the sidebar collapsed will be: 600px - sidebar collapsed width - sbText left padding - sbText right padding - border = content width. So, 600-15-10-10-1=564.
Now let's write the JavaScript. For convenience, an explanation of how the script works is commented right into the code. Strip out all of the comments, and you've got a simple, 14 line script.
<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 == '150px') {
// 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 = '564px';
// Otherwise, if the sidebar is already collapsed...
} else {
// Set the sidebar width back to 150.
bar.style.width = '150px';
// Make the sbText div visible again.
barText.style.display = 'block';
// Set the content div width back to 429.
box.style.width = '429px';
}
}
// -->
</script>
Great. Now, plop the script into the HEAD section of your page and we're all set.
Let's see it in action. (Note: I've added a few additional style elements and filler text simply for appearance purposes.)
While it may seem a bit complicated at first, especially if you're a beginner, the more time spent studying the code, the simpler it will become. As with anything, the best way to learn is to practice, so feel free to experiment with the code, play around and get your hands dirty. I think you'll find that slight modifications on this technique yield all sorts of possibilities. Here are a couple of ideas.
Challenge #1: Take what you've learned here and make collapsing and expanding divs that stack and fold vertically.
Challenge #2: Modify the JavaScript to expand and collapse list menus.
Thanks for reading, and I hope you enjoyed the tutorial. Additional articles that I have written may be found at www.kellishaver.com.
Kelli Shaver is a designer/developer from Morehead, KY where she resides with her husband, daughter, two dogs and one fish named Norman. Kelli holds a degree in fine art and has been designing web sites as a hobby for 8 years and professionally for four.
