title: Determing collapse state of Bootstrap Collapse-able element
body: <p>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.</p>
  
  <p>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.</p>
  
  <p>I define my alert as such: </p>
  
  <pre><code>&lt;div class="row spacer-bottom collapse in" id="cubicCapacityWarn"&gt;
  
      &lt;div class="span8 offset1"&gt;
  
          &lt;div class="alert alert-error"&gt;
              &lt;h4&gt;&lt;strong&gt;Cubic Capacity Warning!&lt;/strong&gt;&lt;/h4&gt;
              Shipment Total PCF less than 6, you may be assessed Cubic Capacity surcharges!
          &lt;/div&gt;
  
      &lt;/div&gt;
  
  &lt;/div&gt;
  </code></pre>
  
  <p>The jQuery that handles all this:</p>
  
  <pre><code>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()) &lt; 6) {
  
          $('#cubicCapacityWarn').collapse('show');
          alert('show')
  
      } else {
  
          $('#cubicCapacityWarn').collapse('hide');
  
      }
  
  });
  
  updateTotals();
  </code></pre>
  
  <p>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.</p>
  
  <p>Also, I found this issue <a href="https://github.com/twitter/bootstrap/issues/5859" rel="nofollow">If the first call to collapse is hide the collapsable will show instead</a> here which seems related but I added the <code>$('#...').collapse({toggle: false});</code> with no effect.</p>