Home Internet

How to Create Expandable Sections Within a Web Page

By Antoinette Smith
JavaScript is the Web's scripting language.
i Hemera Technologies/AbleStock.com/Getty 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

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.

Step 5

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

References

  • "Mastering JavaScript;" James Jaworski
  • "CSS: The Missing Manual;" David Sawyer McFarland

Writer Bio

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.

×