How to expand & collapse text in html

Written by sarah sammis
  • Share
  • Tweet
  • Share
  • Pin
  • Email
How to expand & collapse text in html
Expand and collapse your text on an FAQ to make it more dynamic. (FAQ image by Tribalstar from Fotolia.com)

To have expanding and collapsing text on a Web page, you need to include dynamic HTML (DHTML) to your page. Dynamic HTML is any page that uses HTML and a scripting language, typically JavaScript, to add extra ways for a user to interact with a page beyond just clicking through links. Fortunately, there are many free scripts available. Each script will have two parts: a header script and the body code. The header script goes between the <HEAD></HEAD> tags, and the body code will go below <BODY> wherever you need the text to expand and collapse.

Skill level:
Easy

Other People Are Reading

Instructions

  1. 1

    Use the script at dhtmlgoodies.com for FAQ or Q & A pages. The script allows you to have a question with the answer hidden. Put the script in your header (between the <HEAD> and </HEAD> tags at the top of your raw HTML). Place the rest of the sample code in <BODY> of your page where you want the questions be. Replace the sample questions and answers with your own. The page includes a "How to Use" section if you need help modifying the script to work on your page. When a user clicks on the question, the answer will appear below the question.

  2. 2

    Use the script at dynamicdrive.com to collapse or expand any DIV on your Web page through a simple toggle mechanism. It works with all DIVs, even those that have CSS defined heights. Multiple sections can be grouped together to collapse as a single unit.

  3. 3

    Use the script at javascript.internet.com to make paragraphs collapsible. The script and sample code are provided in a yellow box. Click on the "Highlight All" button and then copy and paste it to a separate file. The instructions for using the script are included as comments within the script itself.

  4. 4

    If you're comfortable with JavaScript and like clean code, use the Prototype £0 Function (found in www.dustindiaz.com), a pared-down expand and collapse script for DIV tags. It provides a way to collapse all the DIV tags when the Web page first loads. This script uses the least amount of code but requires more understanding of how JavaScript works. The website does provide a link to a sample of the script in action.

Tips and warnings

  • The header is where all your Web page meta data goes, like the page title, links to cascading style sheets, links to your RSS feed and links to the scripts you're using. The header is always at the top of the page between the and tags.
  • DIV tags are divisions. They are like sections in a book. Anything placed between a and tag can be controlled as a single item, whether it's a single word or multiple paragraphs.

Don't Miss

Filter:
  • All types
  • Articles
  • Slideshows
  • Videos
Sort:
  • Most relevant
  • Most popular
  • Most recent

No articles available

No slideshows available

No videos available

By using the eHow.co.uk site, you consent to the use of cookies. For more information, please see our Cookie policy.