I'm looking to dynamically adjust the height of a div based on another element, but only if that element does not have the class collapsed (which is used in a Bootstrap toggle collapse feature).
The initial setup seems to work fine, however, when I interact with the element and the collapsed class is removed, the height of #careheight does not update accordingly.
$(document).ready(function() {
var divHeight = $("#care_and_washing").height();
if (!$("#care_and_washing").hasClass("collapsed")) {
$('#careheight').height(divHeight);
} else {
$('#careheight').height("10px");
}
})<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p id="care_and_washing" data-toggle="collapse" data-target="#demo" class="collapsed" style="font-family: 'NiveauGroteskMedium'; font-size: 11px; color: black;">Care & Washing</p>
<div style="cursor: default; padding-left: 13px;" id="demo" class="collapse">
<p style="font-family: Questrial, sans-serif; font-size: 10px;">• Dry Flat</p>
<p style="font-family: Questrial, sans-serif; font-size: 10px;">• Do Not Bleach</p>
<p style="font-family: Questrial, sans-serif; font-size: 10px;">• Tumble Dry Low</p>
<p style="font-family: Questrial, sans-serif; font-size: 10px;">• Iron Low</p>
<p style="font-family: Questrial, sans-serif; font-size: 10px;">• Hand Wash</p>
</div>
<div id="careheight"></div>