How to Make Collapsing Lists Without Java

By John Mitchell

Create a collapsing list by using pure CSS code without the need for Java or JavaScript in your source file. By using the sample code below, you can achieve a list that collapses or expands every time you click the corresponding link. When you click "Collapse" the list collapses from view and when the "Expand" link is clicked, and then the list appears on the screen.

Step 1

Open a text editor program on your computer and create a new, blank document.

Step 2

Type the following code at the top of the document:

Step 3

Insert the following code below the "

" tag:

Step 4

Insert the following code below the "

" tag, which contains the list content and calls upon the CSS styling previously set:
  • Item 1
  • Item 2
  • Item 3

Step 5

Close the HTML document with the proper by typing at the bottom:

Step 6

Save the HTML file in your text editor program. The file should be saved with the "HTML" or "HTM" file extension so it displays correctly in a Web browser.

Step 7

Open the saved file in your browser and test out the collapsible list functionality.