Edit Article

Edited by Chris, ELDER/min Lorraine, MrLuv, Julian and 1 other

Have you created a very long list in HTML that you want your visitor to be able to collapse or expand? To set up the feature that allows your visitor to do things this way, this article will help you adjust your code to meet these expectations.

Ad

Edit Steps

  1. Make a Collapsible List in HTML Without Java Step 1.jpg
    1
    Open a simple text editing program such as either Notepad or WordPad on Windows, or, on a Mac open up TextEdit.
    Ad
  2. Make a Collapsible List in HTML Without Java Step 2.jpg
    2
    Begin your webpage, just like any other webpage by adding both a <html> and a <head> tag.
  3. 3
    Create a JavaScript portion of the document that tells your browser to display your lists in collapsible/expandable form. Use the following code to form this script.
    Ad
<style type="text/css">
 .row { vertical-align: top; height:auto !important; }
 .list {display:none; }
 .show {display: none; }
 .hide:target + .show {display: inline; }
 .hide:target {display: none; }
 .hide:target ~ .list {display:inline; }
 @media print { .hide, .show { display: none; } }
 </style>



Make a Collapsible List in HTML Without Java Step 3.jpg
  1. Make a Collapsible List in HTML Without Java Step 4.jpg
    1
    Close the head portion of the page, with the ending tag for the head of the page (</head>).
  2. Make a Collapsible List in HTML Without Java Step 5.jpg
    2
    Create the body of the HTML code. Type the tag for starting the body (<body>).
  3. 3
    Create the list content, including some HTML styling information for the users browser to use, for them to expand and collapse the list. Use the following code to create this. Remember to follow the rules for creating lists and nested lists inside the code.
    Ad
<div class="row">
 <a href="#hide1" class="hide" id="hide1">Expand</a>
 <a href="#show1" class="show" id="show1">Collapse</a>
 <div class="list">
 <ul>
 <li>Item 1</li>
 <li>Item 2</li>
 <li>Item 3</li>
 </ul>
 </div>
 </div>



Make a Collapsible List in HTML Without Java Step 6.jpg
  1. Make a Collapsible List in HTML Without Java Step 7.jpg
    1
    Close off the body section of the HTML code, by typing the </body> tag.
  2. Make a Collapsible List in HTML Without Java Step 8.jpg
    2
    Type the closing </html> HTML tag to complete the file.
  3. Make a Collapsible List in HTML Without Java Step 9.jpg
    3
    Save your work as a file with either a HTML file extension or an HTM file extension, and preview the page in your browser before completely uploading it to the web.
    Ad


Edit Related wikiHows

How to
Toggle HTML Display With JavaScript

How to
Make a List in HTML

How to
Define a Selectable List in HTML

How to
Define a Definition List in HTML

How to
Learn HTML


Article Info

Categories: HTML

Recent edits by: Julian, MrLuv, ELDER/min Lorraine

Ad

Thanks to all authors for creating a page that has been read 13,207 times.

Was this article accurate?

YesNo

Contribute
to wikiHow!

Edit this article