How to Create Expandable Sections Within a Web Page

by Antoinette Smith

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.

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.

2

Give your

an ID and a style. Change your opening
tag to
3

Enter the following just before the

tag:

Less.

This line makes your content collapse if it has been expanded. Specifically, it calls a JavaScript function, Tog. This call to Tog dynamically sets the display property to none.

4

Enter the following just after the

tag:

More.

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.

5

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

References

About the Author

Since 2008, Antoinette Smith has covered sports and local events for "TechNews," the student newspaper for the Illinois Institute of Technology. She holds a Bachelor of Science in professional and technical communication from the Illinois Institute of Technology.

Photo Credits

  • photo_camera Hemera Technologies/AbleStock.com/Getty Images