Tutorials > CSS > Expanding / Collapsing Sidebar Page 2
The XHTML:
I find coding the XHTML to be the easiest way to proceed. Then, once we're done with that, we can go back and write the JavaScript to place in the HEAD section of our page.
Before we can write the XHTML, though, we need to calculate a few widths - particularly that of our sidebar and of our main content div.
The sidebar div: This is simple. We just pick the width we want. For this example, I'll use 150px.
The content div: This gets a little more complex. Here's the formula for calculating the content box's width: 600px - sidebar width - sbText left padding - sbText right padding - content left border = content width. So, 600-150-10-10-1=429.
We'll also create a little image that will serve as our toggle button. The one I've created here is 10px x 100px and I named it "toggle.jpg".
Now that that's out of the way, we can move on to the actual XHTML.
<div id="container">
<div id="sidebar" style="width:150px;">
<div id="handle">
<img src="toggle.jpg" width="10" height="100" border="0"
alt="Click to toggle the sidebar" onclick="toggle()" />
</div>
<div id="sbText" style="display:block;">
<p>Sidebar Content</p>
</div>
</div>
<div id="content" style="width:429px;">
<p>Main Content</p>
</div>
</div>
Note the "display:block" inline style attached to the sbText div. This is simply telling the browser that it should display this div by default, which it would do anyway, but this gives us something for the JavaScript to grab onto so that we can change that value later. We've also specified the width of the sidebar and the content divs. Finally, when we place our "toggle.jpg" image, we're assigning it an onclick function of "toggle()". This is our function call to the JavaScript that will actually do the expanding / collapsing. Let's write that now.
Tutorial continues on page 3.
