DETAILS and SUMMARY Element Examples
Test how your browser supports the DETAILS element and it’s related element SUMMARY
- Simple
DETAILSItem with NoSUMMARY - Simple
DETAILSwithSUMMARY - Simple Open
DETAILSwithSUMMARY - Using the
DETAILSandSUMMARYElement in a Real Example
Simple DETAILS Item with No SUMMARY
These are the details
Return to DETAILS element information.
Return to SUMMARY element information.
Simple DETAILS with SUMMARY
This is the Summary
These are the details
Return to DETAILS element information.
Return to SUMMARY element information.
Simple Open DETAILS with SUMMARY
This is the Summary
These are the details
Return to DETAILS element information.
Return to SUMMARY element information.
Using the DETAILS and SUMMARY Element in a Real Example
You can use the DETAILS and SUMMARY elements to create a list of items that has additional information included if the reader wants to see it.
In this example, the Title of the movie is included in the
Pride and Prejudice is a movie based on the novel of the same name. It is a comedy of manners, and how both prejudice and pride can lead to unhappy circumstances.
The Shawshank Redemption is a story of a man who was jailed for killing his wife when he was innocent. He discovered the truth while in jail, and set out to get redemption.
SUMMARY and then a description of that movie is included below. If the reader already knows what the movie is about, then they don’t have to click the description.
Pride and Prejudice
The Shawshank Redemption
Return to DETAILS element information.
Return to SUMMARY element information.
