How to Make a Collapsible DIV in CSS

by Finn McCuhil

Use collapsible DIV tags to enable visitors to your website to read additional content without being forced to leave the current page. These tags allow you to create a page with numerous expandable headings that let users view only the details they are interested in without wading though long pages of text. Quicker searches make your site more user friendly and enhance its value to your visitors as a reference tool.

Step 1

Create a "

" tag containing the pop-up text. Place this in the "" section of your HTML code. Set its initial display state to none:

Popup text
How does this look?

Step 2

Assign an anchor hyperlink to open a JavaScript to perform the actual pop-up action on the "

" tag. In this script, clicking the left mouse button activates the link. Place this code directly beneath the previous line: Click to Expand

Create the JavaScript function that controls the visibility of your hidden CSS "

" text. Place this function in the "" section of your HTML code:


  • In this example, the text “Click to Show or Hide” is displayed with the properties assigned to the "" tag. The first time the user clicks the text, the message “Popup text”, “How does this look?” displays on the screen with a carriage return in place of the comma. The message disappears when the user clicks the tag a second time.

More Articles