I am working on a feature where clicking on a card should display a summary.
When a new summary is shown, I want the summary container to animate and align its position with the associated card (top).
However, despite my efforts, I am facing an issue where the height of the summary container 'snaps' without any smooth transition.
*Solution Attempt 1
$('.summary > div').css({'height':0,'overflow':'hidden'});
$('.summary > div[data-content="'+ activeIndex +'"]').css({'height':'initial'});
*Solution Attempt 2
$('.summary > div').fadeOut();
$('.summary > div[data-content="'+ activeIndex +'"]').fadeIn();
*Solution Attempt 3
$('.summary > div').animate({'height':0, 'overflow':'hidden'});
$('.summary > div[data-content="'+ activeIndex +'']).animate({height:'initial', 'overflow':'visible'},200);
In addition to that, in my CSS code, I have added transition: all 2s ease; to animate both margin-top and height properties.
To better understand this functionality, I have provided a test case below:
$(document).ready(function() {
alignSummary = function() {
// Animate the summary panel
$('.summary').css({
'margin-top': ($('.card.is-active')[0].offsetTop - 50)
})
// Show/hide the relevant summary content
var activeIndex = $('.card.is-active').index();
$('.summary > div').hide();
$('.summary > div[data-content="' + activeIndex + '"]').show();
}
alignSummary();
});
$('.card').on('click', function() {
// Do this if a card with a greater index is clicked
if ($(this).closest('.card').index() > $('.card.is-active').index()) {
// Scroll the window to the top of the active card
$([document.documentElement, document.body]).animate({
scrollTop: ($(this).closest('.card').offset().top - 20)
}, 800);
}
// Swap the active class to the card clicked
$(this).closest('.card').siblings().removeClass('is-active');
$(this).closest('.card').addClass('is-active');
alignSummary();
})body {
margin: 0;
}
.container {
padding: 25px;
overflow: hidden;
}
.card,
.summary {
margin-bottom: 1rem;
border: 1px solid #e3e3e3;
padding: 1rem;
border-radius: 4px;
width: 49%;
}
.card.is-active {
border-color: red;
}
.card {
float: left;
}
.summary {
float: right;
width: 40%;
transition: all 2s ease;
}
div[data-content="1"] {
height: 500px;
}
div[data-content="2"] {
height: 100px;
}
div[data-content="3"] {
height: 400px;
}
div[data-content="4"] {
height: 1200px;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
<div class="summary">
<div data-content="1">
<h2>Variable height summary 1</h2>
<p>Some content: 500px height</p>
</div>
<div data-content="2">
<h2>Variable height summary 2</h2>
<p>Some content: 100px height</p>
</div>
<div data-content="3">
<h2>Variable height summary 3</h2>
<p>Some content: 400px height</p>
</div>
<div data-content="4">
<h2>Variable height summary 4</h2>
<p>Some content: 1200px height</p>
</div>
</div>
<div class="card is-active">Click me</div>
<div class="card">Click me</div>
<div class="card">Click me</div>
<div class="card">Click me</div>
</div>