The stock animation effects given in jQuery are pretty good for the majority of tasks.
However, if you want to show an element at a given size and then slide it to full expanded view, you'll need to do a little magic.
This was based on a small snippet by Chris Pollock, but I've made it a bit more flexible so it'll work on a wider number of cases.
- Allows effect to apply on more than 1 element at a time.
- Size is passed into the setup call to allow for multiple sizes.
- Original height is saved as $.data() rather than an attribute.
- Maintain original trigger HTML to allow for easier styling.
- Trigger element made optional argument. Sizable element is now the trigger if none specified.
- Able to specify the open/close labels for the trigger element.
Snippet:
You can download the snippet here.
Sample uses:
The single element examples apply to individual elements.
Applying sizeExpand to groups of elements will work best if the element expands itself. If you wish to expand the each element with its own trigger, you'll have to manage that within a loop.
$(document).ready(function() {
// single elements
$('#single-element').sizeExpand('50px');
$('#sized-element').sizeExpand('50px', { 'trigger': '#trigger-element' });
$('#sized-element').sizeExpand('50px', { 'trigger': '#trigger-element', 'open_label': 'Show me the money!', 'close_label': 'I have no money :(' });
// groups of elements
$('div.sized-group').sizeExpand('50px');
}); [ Source ]
