Creating a list that is expandable and collapsible in HTML5

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:

Overview 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.

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>
Civil Wars