In my application, I am experiencing an undesirable side effect when using slideDown(). Upon clicking the element, a piece of content is appended to an ancestor. This causes the clicked button to shift to the right and the ones on the left to move slightly as well. I simply want the button group to remain stationary.
If you'd like to see the issue in action, click on the yellow refresh button: jsfiddle
$(document).on('click', '#counter-offer', function(e) {
e.preventDefault();
var thiz = $(this);
var element = thiz.closest('#negotiation-buttons').find('div#counter-offer-form-container')
$.get('/negotiation/counter_offer_form', $(this).find('form').serialize(), function(data) {
if (element.length) {
element.slideUp('200', function() {
element.remove();
});
} else {
thiz.closest('#negotiation-buttons').append(data['form']).
find('#counter-offer-form-container').hide().slideDown(400);
}
});
});
I am unsure of how to address this issue. Any suggestions?