EverWeb Widgets
- [1] How is this list created?
- The HTML5 <dl> tag is used since it defines a description list
- [2] How are the list items split into Q & A?
- The <dl> contains pairs of <dt> (questions) and <dd> (answers)
- [3] How do they open and close?
- The <dt> elements are triggers which slide open the corresponding <dd> on click using javascript
- [4] Javascript
- A jQuery plugin is used to add an "on" class to the <dd> causing it to slide down
- [5] Why is this better for SEO?
- The search engines recognise this as a list of pairs of items that are related to each other so it is better than using an unordered <ul> or ordered <ol> list
- [6] How many questions & answers can it hold?
- Up to one hundred
Responsive FAQ Widget
FAQ
The FAQ section has an optional heading which can have a contrasting background and color and can be aligned left, center or right.
It can hold up to 100 items and works accordion style where the open item closes when another is selected.
Responsive Q & A Widget
What is a Responsive Web Page?
A responsive web page uses HTML and CSS to automatically resize and position elements to suit on all devices - desktops, tablets, and phones
What are Media Queries?
A media query is a CSS technique introduced in CSS3. It uses the @media rule to include a block of CSS properties only if a certain condition is true such as the width of the browser or device screen
What does the Viewport Meta Tag do?
It sets the viewport of the page giving the browser instructions on how to control the page dimensions and scaling.
How do I make an item responsive?
Responsive items are given a percentage width and the height is set to "auto"
How do I control the width?
Responsive items are centered in the browser with a maximum width setting to control its spread
Questions & Answers
The heading above the questions and answers section is optional. The questions and answers can have different styles as shown in the example above and the widget can display up to 100 of them if required.
Any answer can be set to be open at page load. There is a checkbox to have the option of preventing the open answers closing when another questions is selected if it is deemed helpful to have all the selected answers open at once.
Responsive Toggle Box
The toggle box is a space saving item which can be added below any other item to provide more info on click. The toggle function uses a tiny jQuery plugin to created the show/hide animation which has a control for adjusting the animation time.
Toggle Box
The widget has a maximum width setting and allows the toggle tab to be aligned left, center or right in relation to the toggle box.
The toggle box has options for an image with alt text, an h1 heading, a paragraph, a list with style options, a second paragraph and a CTA style link.
The box can be style with a border and/or a box shadow.
How to create the list …
- Click the Asset List Add button
- Select the item in the Asset List
- Enter the list item text
- Click the entry in the Asset List to make it editable and give it a name or number
- Set the list style and adjust the inset
- Adjust the vertical spacing of the list items using the "List Line Height" control
Check the box to add a link, enter the link text and choose the "Link to:" page.
To create an external link, check the box, enter the URL and check the box to open in a new window if required.
The link can be aligned left, center or right.
Show/Hide
The toggle box has its display selector set to a value of "none". When the toggle tab is clicked, the display is set to "block" and the transition is given a time in milliseconds to smooth it out.
When the widget is dragged onto the EverWeb design canvas, the toggle box is visible for editing. Prior to publishing, the last box in the widget settings is checked and it disappears.
Toggle Tab
The tab can be style for font color, background, hover color and border width, color and radius. If the border is used, it will inherit the font hover color on mouse over. The tab can aligned left, center or right in relation to the box and its vertical spacing from the items above and below can be adjusted.
Box
The toggle box is responsive and centered in the browser with a maximum width setting. It can have a border and/or a box shadow.
There are options for adding an image with alt text, a heading, text, a styled list, more text and a CTA style link tab.
List
The list is created using the EverWeb widget API Asset List and can accomodate up to 48 items if required. Items are added by using the Add button and then selected to add the list item text in the box below the list.
Each item can be given a unique name or number by selecting the text and then clicking on the item in the Asset List to make it editable.
Items can be rearranged in the list order by dragging their item name in the Asset List box up or down.
The list item inset can be adjusted as well as their vertical spacing.
The list style types available are disc, circle, square, none, decimal, decimal-leading-zero, lower-alpha and upper-alpha.
Link
The optional CTA style link tab has the same styling options as the toggle tab. It can be configured to open an internal or external page and open in a new window if required.