How to Make Collapsing Lists Without Java

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

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

Step

Type the following code at the top of the document:

Step

Step

Insert the following code below the "

" tag:

Step

Step

Insert the following code below the "

" tag, which contains the list content and calls upon the CSS styling previously set:

Step

Expand Collapse
  • Item 1
  • Item 2
  • Item 3

Step

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

Step

Step

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

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