How to Expand & Collapse Text on a Web Page

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.

Image Credit: Jupiterimages/Pixland/Getty Images

Step 1

Open the HTML code of the web page you wish to add collapsible text to. Locate the and tags. 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. This line makes a header which will toggle a section with an id of "a1"

Section 1

Enter the section text inside a container with id "a1" and a class of "texter".
Section 1 content.

Step 3

If you need additional items, continue with the pattern, using different pairs of ids for each section title and content area. 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.