i
As you can see from the image to the left, Mickey put a lot of thought into designing this widget.
The layout consists of an HTML5 <figure> and an <article> side by side in separate columns with a "Show More" <article> appearing below on click.
This section appears when the icon tab is clicked. The tab has a chevron down icon when this section is closed and a chevron up when it is open. The tab colors and background can be changed.
This section has a heading, text and an optional CTA style link which can be configured to open internal or external pages with a new window option.
When several of these widgets are stacked, the layout can be made by switching the position of the first two elements.
The widget uses a jQuery plugin to enable the amimated open/close function. When viewed on the EverWeb ddesign canvas, the "more" section is open. It is then closed prior to publishing by checking a box.
Note that any item can be open on page load if required simply by leaving the box unchecked. When several of these items are placed on a page, the opened one will close when another is opened.
Proportions
The <figure> and the <article> beside it are vertically centered in the grid. Their relative widths can be changed by entering different values for the number of fractional units they occupy.
If both items are to be equal in width, the controls for "Left Column" and "Right Column" should be left at the default value of 1.
In this example, the left column is set to 3 and the right column to 2 so that the text occupies 3/5 or 60% of the width and the image 2/5 or 40%.
When viewed on mobile touch devices, the image becomes full width and the text positions itself below it.
The breakpoint at which this happens is selected from a drop down in the widget settings.
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.
In responsive design, side by side items can't just stay like that as the browser/device window width is decreased - otherwise they would become too small to view properly.
A breakpoint is added via a media query to change the layout when the available width is equal to or less than the value set in the media query.
This widget only requires one breakpoint but more complex layouts can use several to change the layout for all the differrent device types.
The grid has two columns above the break point and one below it. Each item is an image with alt text and a chevron down action icon tab at the bottom right.
Clicking or tapping the icon will reveal the hidden content and the icon switches to a chevron up.
When the icon is clicked, a previously open item one will close.
The hidden content consists of a heading, text block and an optional CTA style link tab. The link canbe configured to open internal or external pages and in a new window if required.
Spans
The widget settings include controls for styling text in <span> tags for font size and color.