EverWeb Widgets HTML5

HTML5 Details Element List Content

details element  list

Details List With Summary

The HTML5 details element contains a summary element which is like a heading. This has a default turn arrow which will turn down when the visitor clicks the summary to reveal the content.
The content in this case is an optional lead in paragraph and up to eight list items.
The default setting is to have the content hidden on page load.
This widget has a checkbox for changing the behavior to show the content on page load if required.
Two examples are shown below.
The first one has its background set to the same as the page content with minimal styling. The second one has a contrasting background and is set to show the content on page load.

 Summary

This is the lead in text paragraph which can be hidden if not required.

List Item [1]
List Item [2]
List Item [3]
List Item [4]
List Item [5]
List Item [6]
List Item [7]
List Item [8]

Widget Settings

The box next to "Open On Page Load" is checked by default so that the content of the details element can be seen while creating and styling it.
Enter the Summary and the Details text. See THIS page for info about inserting text and hyperlinks into widgets.
Enter the font name and check the box if it is Google hosted. Select a web safe font and set the background and corner radius if required.
Set the Summary font size, color, style and weight.
Set the Details text font size, color, list items inset margin and line height.
Enter the the list items as required. The first three are obligatory and more be added and displayed by checking the box.
Now uncheck the box if the content is to be hidden on page load.
Use the Arrange menu to bring the widgets to the front as necessary.

 Summary

This is the lead in text paragraph which can be hidden if not required.

List Item [1]
List Item [2]
List Item [3]
List Item [4]
List Item [5]
List Item [6]
List Item [7]
List Item [8]
Get The Widget

Widget Settings

Fieldset Legend Widget
Details List