Slide-In Text Box

About

Uses a combination of CSS and JavaScript to initially hide some content and then reveal it when a link is clicked.

Works with multiple "text boxes" on one page, and has an Expand/Collapse All option.

Example

If you wish to see it in a real-world situation, the Slide-In Text Box has been used in the menus of both this site and Nocturnal Web Design

Expand/Collapse All

Normal

Expand/Collapse "Lorem Ipsum"
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin venenatis enim eget lectus. Praesent sed orci ut magna nonummy aliquam. Curabitur mauris mauris, interdum vel, tristique a, tempor semper, erat. Aenean eget eros nec ipsum lacinia aliquam.
Expand/Collapse "The quick brown fox"
The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog.

Styled

Key: A red link will open a box, a blue link will close a box

Box 1
The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog.
Box 2
The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog.
Box 3
The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog.

Using

First put the following at the end of the <head> section:

<script src="slidein.js" type="text/javascript"></script>

Next you need to add this CSS somewhere:

.slide {height: 0; overflow: hidden;}

After that it varies depending on what you want a particular link to do...

Single box

To create a link that will expand and collapse a single box (see the above "Normal" example), use the following:

<a href="#" onclick="slide('box'); return false;">Click Here</a>
<div class="slide" id="box"><div>Some content.</div></div>

The inner <div> is important.

The "box" in the ONCLICK and the "box" for the ID can be anything you like, but they must be the same as each other; this is what joins the link and box together. Similarly the "Click Here" and "Some content" can be anything you want, including images.

The HREF for the link should really point to a page where the hidden content is revealed without JavaScript. This is so that when people have CSS but don't have JavaScript, they can still reveal the hidden content. One way to achieve this would be to use PHP to hide the class="slide" on a particular box when a variable in the URL is set.

Expand/Collapse All

The following link will expand or collapse all boxes:

<a href="#" onclick="slide(); return false;">Expand/Collapse All</a>

When "slide()" has no arguments, it will expand/collapse all the boxes. Any <div> with the CLASS of "slide" will be affected; there is currently no way to group boxes for multiple "expand/collapse all" links.

To exclude a box from Slide All, set its class to "slide noslideall" instead of just "slide".

Styling

If you want to apply different styles to the links depending on whether they will open or close a box (see the above "Styled" example), then define CSS for the CLASSES "slideopen" for when the link will open a box and "slideclosed" for when it will close it.

To have the JavaScript change the CLASS of the links, use the following code for a "single box" instead of the code given above:

<a href="#" class="slideopen" onclick="slide('box', 0, 0, this); return false;">Click Here</a>
<div class="slide" id="box"><div>Some content.</div></div>

As of version Bravo, if you want to trigger the collapse using a different element (for example, the collapse of the menu for 6 times 9 is triggered by pointing at the main content) then put the "onclick" on the element and instead of "this" put the ID of the link used for opening. For example I hide the "Menu" here when you point at it, and put its ID into the main content's function to get it to reappear.

Download

To download the Slide-In Text Box just right-click and choose "Save As" (or the equivalent for your Operating System/Web Browser).

The current version is Alpha (2008-01-24) - No changelog.

There's now an RSS feed for easy notification of the infrequent updates to all 6 times 9 projects.

Feedback

I'd like to hear what you have to say about this script; I've only been able to test it in IE, Firefox, and Opera in Windows - I have no idea if it'll work on a Mac, for example...

If you have any comments, compliments, or suggestions feel free to email me and let me know.