Determing collapse state of Bootstrap Collapse-able element

I display an alert for a user until the density of a shipment goes above a certain value. When the page loads, a function runs that handles all these calculations (in case the user is loading something and not starting from scratch) and if the density is less than X the collapse is shown, otherwise it's hidden. The problem is that when calling .collapse('hide') or .collapse('show') on an element that's already hidden/shown causes it to do the opposite. I define my alert as such: ``` <div class="row spacer-bottom collapse in" id="cubicCapacityWarn"> <div class="span8 offset1"> <div class="alert alert-error"> <h4><strong>Cubic Capacity Warning!</strong></h4> Shipment Total PCF less than 6, you may be assessed Cubic Capacity surcharges! </div> </div> </div> ``` The jQuery that handles all this: ``` function updateTotals() { var total_weight, total_volume, total_density; total_weight = 0; total_volume = 0; total_density = 0; $('#units').find('table.unit').each(function(index){ var weight, volume, density; weight = 0; volume = 0; density = 0; volume = parseFloat($(this).find('.unit_cube').text(), 10); $(this).find('tbody.products tr').each(function(pIndex){ weight += parseFloat($(this).find('.weight').text(), 10); }); density = weight / volume; density = density.toFixed(2); $(this).find('.unit_density').text(density); total_weight += (weight * parseInt($(this).find('.unit_num_of').text(), 10)); total_volume += (volume * parseInt($(this).find('.unit_num_of').text(), 10)); }); total_density = total_weight / total_volume; $('#total_weight').text(total_weight.toFixed(2)); $('#total_volume').text(total_volume.toFixed(2)); if(isNaN(total_density.toFixed(2))) { $('#total_density').text("0.00").trigger('change'); } else { $('#total_density').text(total_density.toFixed(2)).trigger('change'); } } $('#cubicCapacityWarn').collapse({toggle: false}) $('#cubicCapacityWarn').on('shown', function(event){ event.stopPropagation(); return false; }); $('#cubicCapacityWarn').on('hidden', function(event){ alert('hidden') event.stopPropagation(); return false; }); $('#total_density').change(function(){ if(parseFloat($(this).text()) < 6) { $('#cubicCapacityWarn').collapse('show'); alert('show') } else { $('#cubicCapacityWarn').collapse('hide'); } }); updateTotals(); ``` I was thinking to solve this by testing if it's already collapsed before calling .collapse('show'|'hide') but I don't know how. If there's a more elegant solution to this problem, I'd love to hear it. Also, I found this issue If the first call to collapse is hide the collapsable will show instead here which seems related but I added the `$('#...').collapse({toggle: false});` with no effect.