EverWeb Widgets HTML5

HTML5 Details Element Text Content

HTML5 Details Text Widget

Details Text 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 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.

 Styled Details Element

The details element widget allows the background color and corner radius to be styled.
It uses a common font family and the summary and text content can be styled separately.

 Summary Element

The HTML5 details element is useful for showing/hiding text, images and lists.
The space saving design can be utilised in mobile websites and anywhere else a lot of info needs to be crammed into a small space.

Widget Settings

Details Text Widget
HTML5 Details Text

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 and check the box if it is Google hosted. Select a web safe fallback font and set the background color and corner radius if required.
Set the Summary font size, color, style and weight.
Set the Details text font size, color, line height and padding.
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 required.

Get The Widget