Tools Contact Us

(accordion style - no Javascript)

This example shows how to use the native HTML Details and Summary pop-open section. It only uses Javascript to close the details section (in the button in this example). A containing element is used to allow for grouping and applying styles to the group of pop-opens (ex. rounded borders). Use the Javascript to close other sections when a new section is opened. Do not include Javascript to allow multiple sections to be open at the same time.

First Section

This is the text in this first section.

Use a "Close" button if the section is taller than the normal screen height

Second Section

This is the text in this second section.

Third Section with Sub Pop-Opens

Sub Pop-Open 1 (with Close button)

Sub pop-open 1

Sub Pop-Open 2

Sub pop-open 2

Sub Pop-Open 3

Sub pop-open 3

Code (minimum required)