Hello, I have a question about jQuery as I am relatively new to it.
I am currently working on creating a team members section where clicking on a team member will slide down information about that person underneath.
I have managed to set up the parent container to detect the height of the team member's information and animate in height dynamically for each person. This ensures that other team members are not covered up as they are pushed down accordingly.
However, my problem lies in the fact that the information about the person simply appears without any smooth animation like the rest of the elements do. I attempted to animate the ".team-content-container" with an initial height of zero, but faced some issues.
Is there a way for me to make the entire section smoothly animate into view?
Any assistance would be greatly appreciated!
Link to codepen: https://codepen.io/Finches/pen/jYKmEd
// Show/hide content from clicking box title
$('.open-team-box').click(function() {
//Get height of content
var height = $(this).siblings('.team-content-container').height() + 350;
//Convert height to string
var heightStr = height.toString();
//Toggle height and content box display
if ($(this).parent('.team-container').height() == 350) {
$(this).parent('.team-container').animate({height: heightStr});
$(this).siblings('.team-content-container').show();
console.log(height);
}
else if ($(this).parent('.team-container').height() == height) {
console.log('test');
$(this).siblings('.team-content-container').hide();
$(this).parent('.team-container').animate({height: "350px"});
}
});