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.

Woman helping man with computer
credit: Jupiterimages/Pixland/Getty Images


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:


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.


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.