Part 2: Using HTML5's summary/details with requiring JavaScript.
Starting collapsed. Click on summary to open.
These are the details. No JavaScript is needed to show/hide.
CSS is used to make the summary element look like an H3 heading.
Starting expanded. Click on summary to close.
These are the details, forced to be visible by the open=true attribute.
This is useful to initially display a notice or news updates that can then be rolled up and out of the way.
Indented details using a DIV and CSS. Open to see it.
Wrapping the details in a DIV allows them to be indented for visual appeal.
CSS used to remove the arrow indicator
These are the details. The arrow widget was removed by using the 'list-style: none;' CSS property.
This example looks the most like the old JavaScript method.