How to Make a Collapsible List in HTML Without Java
Open a simple text editing program such as either Notepad or WordPad on Windows, or, on a Mac open up TextEdit., Begin your webpage, just like any other webpage by adding both a and a tag. , Create a JavaScript portion of the document that tells...
Step-by-Step Guide
-
Step 1: Open a simple text editing program such as either Notepad or WordPad on Windows
Use the following code to form this script. <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>
, Type the tag for starting the body (<body>). , Use the following code to create this.
Remember to follow the rules for creating lists and nested lists inside the code. <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>
,, -
Step 2: on a Mac open up TextEdit.
-
Step 3: Begin your webpage
-
Step 4: just like any other webpage by adding both a <html> and a <head> tag.
-
Step 5: Create a JavaScript portion of the document that tells your browser to display your lists in collapsible/expandable form.
-
Step 6: Close the head portion of the page
-
Step 7: with the ending tag for the head of the page (</head>).
-
Step 8: Create the body of the HTML code.
-
Step 9: Create the list content
-
Step 10: including some HTML styling information for the users browser to use
-
Step 11: for them to expand and collapse the list.
-
Step 12: Close off the body section of the HTML code
-
Step 13: by typing the </body> tag.
-
Step 14: Type the closing </html> HTML tag to complete the file.
-
Step 15: Save your work as a file with either a HTML file extension or an HTM file extension
-
Step 16: and preview the page in your browser before completely uploading it to the web.
Detailed Guide
Use the following code to form this script. <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>
, Type the tag for starting the body (<body>). , Use the following code to create this.
Remember to follow the rules for creating lists and nested lists inside the code. <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>
,,
About the Author
Andrea Moore
Enthusiastic about teaching crafts techniques through clear, step-by-step guides.
Rate This Guide
How helpful was this guide? Click to rate: