How.com.vn is a “wiki,” similar to Wikipedia, which means that many of our articles are co-written by multiple authors. To create this article, 10 people, some anonymous, worked to edit and improve it over time.
This article has been viewed 156,021 times.
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.
Steps
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 <html> and a <head> tag.
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.<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>
Close the head portion of the page, with the ending tag for the head of the page (</head>).
Create the body of the HTML code. Type the tag for starting the body (<body>).
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.<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>
Close off the body section of the HTML code, by typing the </body> tag.
Type the closing </html> HTML tag to complete the file.
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.Advertisement
Expert Q&A
Is this article up to date?
⚠️ Disclaimer:
Content from Wiki How English language website. Text is available under the Creative Commons Attribution-Share Alike License; additional terms may apply.
Wiki How does not encourage the violation of any laws, and cannot be responsible for any violations of such laws, should you link to this domain, or use, reproduce, or republish the information contained herein.
- - A few of these subjects are frequently censored by educational, governmental, corporate, parental and other filtering schemes.
- - Some articles may contain names, images, artworks or descriptions of events that some cultures restrict access to
- - Please note: Wiki How does not give you opinion about the law, or advice about medical. If you need specific advice (for example, medical, legal, financial or risk management), please seek a professional who is licensed or knowledgeable in that area.
- - Readers should not judge the importance of topics based on their coverage on Wiki How, nor think a topic is important just because it is the subject of a Wiki article.
