JavaScript & PHP‎ > ‎

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

NOTE: The example is non-functional; once I spend more time with Google Sites I'll hopefully get all the JavaScript working. At the moment my primary goal is availability of the scripts. The example is, however, representative of the appearance of the proper script.

Here's a screenshot of a pair of text boxes with one of them open:

Example 1

and the other open:

Example 2

The animation is difficult to capture in a screenshot...

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 (as in the Example screenshots above), 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, 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>

Feedback

I'd like to hear what you have to say about this or any other project on the site.

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

Download

Download the latest version using the link below.

Note that the first version uploaded here was last updated 2008-03-27. The date of any subsequent changes will be accurately reflected in the date shown in the table.

SelectionFile type iconFile nameDescriptionSizeRevisionTimeUser
ċ

Download
A small script that slides a "text box" into view, revealing the previously hidden content.  3k v. 4 23 Mar 2013, 21:49 Richard Winskill
Comments