How to Expand & Collapse Text on a Web Page

By DeannaB

There are many times when a web designer needs to expand and collapse text on a website. This feature is especially useful when it comes to setting up FAQs, organizing blog entries and creating riddle and quiz features. Insert this Java code into your website to implement collapsible text.

Things You'll Need

  • Microsoft Notepad or an HTML editor

Step 1

Open the HTML code of the web page you wish to add collapsible text to. Locate the

andtags. Between them, copy and paste the following code:

Step 2

Locate the section of the

where your collapsible text needs to go. Paste the following code there, substituting the text to suit your needs.
1] Item 1:
Item 1 text.

2] Item 2:
Item 2 text.

3] Item 3:
Item 3 text.

Step 3

If you need additional items, continue with the pattern, using ('a4') and "a4", ('a5') and "a5", ('a6') and "a6", and so on. Save your file and test your code to make sure it functions properly. You should be able to click on a header to bring up hidden text and then make it disappear.

References & Resources