Slide-In Text Box

This is a project I created many years ago, and haven't touched in about 13 to 16 years. It's mainly here for posterity, but if you still find it useful (and if it still works) then by all means feel free to make use of it. Any references to "6 times 9" are because that is the retired website where I was previously hosting things like this.

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

Expand/Collapse All

Normal links

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 links

In this example I've used the :before pseudo-class to put "open" and "close" in front as appropriate.

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"></script>

Next you need to add the following CSS to your stylesheet:

.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 how the code know which box the link controlls.. 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".

Download

To download Slide-In Text Box just right-click and choose "Save As" (or the equivalent for your device/web browser).

Last updated: (version "Bravo")