I am facing an issue with my divs on a page that have a "see more details" link. When clicked, the div expands and should fit the height of the parent div seamlessly. However, currently, each div overflows onto the next parent div until I scroll, at which point it adjusts itself. How can I ensure that the div grows without spilling over?
Current Behavior:
Desired Outcome:
$(function() {
var minHeight = null;
var expCb = function($el) {
$el.addClass('expanded');
$el.find('.expand-details').text('Details -');
};
var collapseCb = function($el) {
$el.removeClass('expanded');
$el.find('.expand-details').text('Details +');
};
$('.details-content a.expand-details').click(function() {
var currentCb = $(this).parent().hasClass('expanded') ? collapseCb : expCb;
currentCb($(this).parent());
updateCardDetailsLockups();
return false;
});
});.details-content {
max-height: 18px;
overflow-y: hidden;
}
.details-content.expanded {
max-height: 2000px;
display: block;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="parent1">
<div class="child col1">
<div class="details-content">
<a href="#" class="details-header expand-details">details +</a> ...
</div>
</div>
<div class="child col2">
...
</div>
</div>
<div class="parent2">
<div class="child col1">
<div class="details-content">
<a href="#" class="details-header expand-details">details +</a> ...
</div>
</div>
<div class="child col2">
...
</div>
</div>