The best I could come up with is the following:
var toggleMinHeight = 30, duration = 2000, easing = 'swing'; $('.toggles').each( function(){ $(this).attr('data-height',$(this).height()); }).click( function(){ var curH = $(this).height(); if ($(this).is(':animated')){ return false; } else if (curH == $(this).attr('data-height')) { $(this).animate( { 'height' : toggleMinHeight }, duration, easing); } else if (curH == toggleMinHeight){ $(this).animate( { 'height' : $(this).attr('data-height') }, duration, easing); } });
JS Fiddle demo .
This demo has some problems:
- Functionality without a function other than the jQuery core library (providing access to "swing" and "linear") can be improved by including the jQuery UI.
- It could almost certainly have been turned into a plugin that would look somewhat less annoying.
- A large, functional, but not very beautiful
if / else if required. - It takes at least one pass
each() to set the height of the 'default' / 'natural' div elements. - If the
div not position: absolute , they are reduced to the baseline of the inline elements (since they are display: inline-block ), this may not be a problem if they are float: left (or float: right , obviously).
Hope this will be helpful, but it certainly is not perfect in its current state.
Edited to publish the version of the above version (it retains all the same problems as before):
(function($) { $.fn.slideTo = function(slideToMin, duration, easing) { var slideToMin = slideToMin || 30, duration = duration || 500, easing = easing || 'linear'; $(this) .attr('data-height', $(this).height()) .click( function() { var curH = $(this).height(); if ($(this).is(':animated')) { return false; } else if (curH == $(this).attr('data-height')) { $(this).animate({ 'height': slideToMin }, duration, easing); } else if (curH == slideToMin) { $(this).animate({ 'height': $(this).attr('data-height') }, duration, easing); } }); return $(this); }; })(jQuery); $('.toggles').slideTo(50,1500,'swing');
JS Fiddle demo .
- slideToMin: it can be either a string with quotation marks, for example "3em", "20px", or unquoted number such as
30 , and represents the height at which you want the item to slip. If there are no units, then the default height is in pixels. - duration: the number of milliseconds for which the animation lasts.
- easing: a
quoted string specifying the type of attenuation to be used in the animation; without jQuery, the UI is either linear or swing. Other options are possible with jQuery UI, but this has not been verified. If not specified, the animation defaults to "linear." . Since using units in the quoted string causes final else if return false (obviously, I suppose ... sigh), use only an unquoted numeric argument for this variable (or edit the plug-in to correctly handle quoted quotes with units. ..).
The big problem that I did not understand until I published it is that the plugin version allows only one iteration of the animation. What am I confused, although perhaps this is obvious to someone else?
Well, this is apparently the height estimate in the if . Using 3em caused the final else if : curH == toggleMinHeight return false. Presumably due to the presence of a unit ( em ) in this variable. The above manual has been edited to reflect that units should not be used.
Literature: