<div id='wrapT'>some content here</div>
<div id='btnsT'>
<img id='prev' src='btns/prev_01.png' alt='prev'>
<img id='next' src='btns/next_01.png' alt='next'>
</div>
JavaScript
$('#btnsT #next').click(function(){
var currentContent = $('#divsT > div').eq(xdiv).html();
$('#wrapT').html(currentContent);
});
The content inside #wrapT changes correctly, but it momentarily collapses to a height of 0 before returning to its original height.
How can I prevent the height from changing during this transition?
It is important to note that both the old and new content have a fixed height of 450px.
I attempted to address this in my CSS:
#wrapT{
height:450px;
}
However, this causes issues when resizing the window as it remains fixed at 450px.
I also tried the following in the button click event:
var currentHeight = $('#wrapT').height();
$('#wrapT').css('height', currentHeight + 'px');
$('#wrapT').html(currentContent);
$("#wrapT").css('height', 'auto');
Unfortunately, these attempts were unsuccessful as #wrapT continues to change its height.