animation - jQuery Toggle different links -
i need help. trying add animation click event. toggle, problem is, have 2 buttons different names , styles, , need when 1 clicked other shows , button clicked hide. here code can understand better:
my markup 2 links:
<a href="#" class="show-more"><?php print t('show more'); ?></a> <a href="#" class="show-less"><?php print t('show less'); ?></a> can me on this? need putting working animation (like jquery toggle fine) , advice performance. in advance.
update
new update
i find way reproduce need, here code:
$('.user-profile .resume p').each(function() { var $obj = $(this); var height = $obj.height(); var maxheight = 40; if (height > 40) { $obj.css('height', maxheight).css('overflow', 'hidden'); $obj.siblings('.show-more').show(); } $obj.siblings('.show-more').click(function(e) { e.preventdefault(); $obj.animate({ 'height' : height }, function() { $obj.siblings('.show-more').hide(); $obj.siblings('.show-less').show(); }); }); $obj.siblings('.show-less').click(function(e) { e.preventdefault(); $obj.animate({ 'height' : maxheight }, function() { $obj.siblings('.show-more').show(); $obj.siblings('.show-less').hide(); }); }); }); here fiddle last code.
can me improving code? lot.
if question how show 1 when clicked second animation, solution:
fiddle: http://jsfiddle.net/sky8v/
hope helped :)
js
$('.show-more').click(function(){ $('.show-more').hide('slow', function(){ $('.show-less').show('slow') }); }); $('.show-less').click(function(){ $('.show-less').hide('slow', function(){ $('.show-more').show('slow') }); }); css
.show-less { display: none; } html
<a href="#" class="show-more">show more</a> <a href="#" class="show-less">show less</a>
Comments
Post a Comment