How to Expand & Collapse Text on a Web Page

Techwalla may earn compensation through affiliate links in this story.
Image Credit: Jupiterimages/Pixland/Getty Images

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.


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:

Video of the Day

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.



Report an Issue

Screenshot loading...