Mobile Website Q & A FAQ
[1] How Does It Work?
The widget uses the HTML5 Details element to create an interactive - click to open, click to close - item without the use of javascript
[2] Heading
The heading is optional and has its own controls for font size, color, background color, padding and text align.
[3] Questions
The questions have the same controls as the heading so that they can have a contrasting style to either the heading or answers - or both.
[4] Answers
The answers have controls for adjusting the font size, color, background and line height.
[5] Separator
The individual items can have a separator which is adjustable for color and height.
[6] Container Styles
The container can be styled with a border and/or box shadow and can have rounded corners if required.
[7] Footer
The footer is optional and has controls for adding auto copyright year update and a smooth scroll back to the top chevron.
[8] Structure
The items are contained in an HTML5 section element. Inside is the optional h1 heading and a list.
Each list item consists of a details element with summary for the interactive heading and a paragraph for the "answer" text.[9] Indicators
The triangle indicators are generated by the browser.
[10] Interaction
Unlike an accordion create using javascript, the action is tap to open and tap to close. In other words, it is not possible to have one item close as another is opened.
[11] Disadvantages
The fact that the visitor has to both open and close the items may be a disadvantage in some situations. However, mobile users are used to tapping and swiping and can usually achieve tapping a lot quicker than a computer user can point and click.
[12] Advantages
The fact that the interaction does not require any scripts means that the page will download faster and the actions will not require processor power which in turn drain the device battery.
Sometimes it is preferable to have several answers open to compare results.[13] How Many Items?
The widget can accommodate up to 100 items.