jquery - Changing button symbol after the toggle is complete -
so, have button showing , hiding div id of "details" , button id of "more" while changing symbols on click , down arrow. (it starts details hidden , down chevron visible. image swap (class change) happen after toggle animation complete instead of on click. how this?
('#more').click(function() { $('#details').toggle('slow'); }); $('#more').click(function() { if ($(this).html() == '<i class="icon-chevron-up"></i>') { $(this).html('<i class="icon-chevron-down"></i>'); } else { $(this).html('<i class="icon-chevron-up"></i>'); } });
.toggle() has callback. use it!
$('#more').click(function() { var $el = $(this); $('#details').toggle('slow', function() { if ($el.html() == '<i class="icon-chevron-up"></i>') { $el.html('<i class="icon-chevron-down"></i>'); } else { $el.html('<i class="icon-chevron-up"></i>'); } }); });
Comments
Post a Comment