For this to work on ALL expand elements, simply set the Animation Effect to Directional Slide in Collapse-Pro-Matic options page. To set only a single expand element using the shortcode, the animation_effect attribute set to ‘toggle’:
To best appreciate how this effect works, it would be best to create a target with a fixed width and height. Using the roll-your-own method the attributes are assigned using data-* format. Here is an example that wraps a fixed size target element in a slightly larger container:
This is the target content div that is linked to the trigger one above. It is wrapped in a div so that there is no change to the vertical size of the page when it slides on and off.
This example has no wrapping div, lets see what happens to the vertical scroll of the page when it slides on and off page.
Collapse-Pro-Mtic 1.1.6 includes three new attributes that override the global default settings, allowing single expand elements to have there own animation-effect, distance and direction attributes. Using the roll-your-own method they defined using the data-* attribute like so:
And by ‘this plugin’ she means Collapse-O-Matic. Well, Anne, that’s a good question! Let’s see what we can figure out here. First we need an image with an image map. We’ll pick something easy… like this:
The pie is a lie
Now clearly we will need to use the roll-your-own method to assign the triggers and target elements. So each of the image map area elements will need the collapseomatic class assigned. And since we do not want arrows assigned, we will also give each area element the class of noarrow.
<area id="noteaten" class="collapseomatic noarrow" shape="poly" coords="x, y, z, n" />
This is a test of a new tabindex attribute feature. Assigning the tabindex attribute a numerical value will set the tabindex attribute for the trigger. We are going to use the number three, because we really like this number.
Now what this will do is assign a tabindex of three to the trigger so you should now be able to hit the tab button and eventually land on the trigger. Something to note:
In HTML5, the tabindex attribute can be used on any HTML element (it will validate on any HTML element. However, it is not necessarily useful).
In HTML 4.01, the tabindex attribute can be used with: <a>, <area>, <button>, <input>, <object>, <select> and <textarea>.
So, with that in mind:
[expand title="Trigger Text" tag="a" tabindex="3"]Target Content[/expand]
When this item is tabbed to, it will be clearly displayed as in-focus due to a nice little frame or border around the element. Trigger Text
[expand title="Trigger Text" tabindex="3"]Target Content[/expand]
Although this item has the same tabindex value as above, since it is using the default tag of DIV it will NOT be visibly shown as in-focus with a frame.
To display a visible change when our item is in focus, simply create a class for the trigger (using trigclass) and define the :focus pseudo class with an outline like so:
Now we need to assign the trigclass attribute our value of ‘greenballs’
[expand title="Trigger Text" trigclass="greenballs"]Target Content[/expand]
This will produce the following:
Now we need to adjust the padding so that the left side of the trigger text is not so smashed-up against the icons. To adjust the vertical centring we need to adjust background-position of the background url as well. Here is how the CSS will look after we make these changes:
background-position: left center;
Looking much better now:
Now If we have a list of expand elements, it might be nice to have a little border that separates each element. Also a bit more vertical padding between the elements:
background-position: left center;
border-bottom: 1px dotted #dfdfdf;
All that is left to adjust is the spacing and add bottom border to the hidden content. Add a new class for and assign it using the targclass attribute: