How to Create Expandable Sections Within a Web Page

By Antoinette Smith

JavaScript is the Web's scripting language.
i Hemera Technologies/ Images

Expandable sections often appear on Web pages as menus or blog snippets. These expandable sections can be created using JavaScript and CSS properties. With a little HTML knowledge, you can create expandable sections within a Web page.

Step 1

Enclose the section you want to expand in

tags. Place a
tag before the expandable area and a
tag at the end of the area. The
tags are similar to the and tags. They divide an HTML document into sections, but do not add formatting.

Step 2

Give your

an ID and a style. Change your opening
tag to

Step 4

Enter the following just after the



This line makes your content expand. This call to Tog dynamically sets the display property to block. Setting the display to block makes the content appear with line breaks above and below it.

Step 5

Enter the following within the tags of the HTML document where the expandable content will appear to begin the section of JavaScript: