If you wish to make a list that can be collapsed and expanded on a webpage
or a section on the page that can be expanded to reveal more details,
you can use the details and summary tags with
version
5 of HTML. E.g., the following code allows information to be displayed or
hidden by clicking on an arrowhead that will appear to the left of whatever
appears within the summary tags. The information within the
details tag will be hidden or displayed by clicking on the
arrowhead to toggle between the two options.
<details>
<summary>Overview</summary>
The American Civil War began on April 12, 1865 when South Carolina militia forces attacked Fort Sumter at Charleston, South Carolina. The war effectively ended on April 9, 1865 with the surrender by Confederate General Robert E. Lee to Union General Ulysses S. Grant, but the president of the Confederacy, Jefferson Davis, did not declare an end to the insurrection until May 9, 1865. Each side in the conflict suffered over 800,000 casualties. The principal cause of the conflict was the issue of slavery within the United States with abolitionists in the North viewing the practice as a crime against humanity while Southern slave owners viewed it as a necessary evil or, for some defenders of slavery, even as a positive good, which they feared would be eliminated under the recently elected President Abraham Lincoln.
</details>
The above code produces the display shown below:
If I instead wanted to have a list that can be expanded and collapsed, I could use HTML code as shown below.
<details> <summary>Civil Wars</summary> <ul> <li>American (1861–1865)</li> <li>Chinese (1946–1949)</li> <li>English (1642–1651)</li> <li>Finnish (1918)</li> <li>Russian (1917–1922)</li> <li>Spanish (1936–1939)</li> <li>Syrian (2011–present)</li> </ul> </details>