title: Bootstrap 4 Collapse show state with Font Awesome icon
body: <p>I have a single Bootstrap 4 collapse as follows...</p>
  
  <pre><code>&lt;a data-toggle="collapse" href="#collapseNEWS" aria-expanded="true" aria-controls="collapseNEWS"&gt;&lt;i class="fa fa-chevron-circle-up" aria-hidden="true"&gt;&lt;/i&gt;&lt;/a&gt;
  &lt;div class="row collapse in" id="collapseNEWS"&gt;Content&lt;/div&gt;
  </code></pre>
  
  <p>This automatically displays the content unless the font awesome icon is clicked.  I am displaying the fa-chevron-circle-up icon upon initial load.</p>
  
  <p>Once the icon is clicked, the content closes and I'd like to show the fa-chevron-circle-down icon instead.  How would I achieve this?</p>
  
  <p>I've looked at the alpha documentation:
  <a href="http://v4-alpha.getbootstrap.com/components/collapse/" rel="noreferrer">http://v4-alpha.getbootstrap.com/components/collapse/</a></p>
  
  <p>...but I'm not clear how I establish the state to show either...</p>
  
  <pre><code>&lt;i class="indicator fa fa-chevron-circle-up" aria-hidden="true"&gt;&lt;/i&gt;
  </code></pre>
  
  <p>or...</p>
  
  <pre><code>&lt;i class="indicator fa fa-chevron-circle-down" aria-hidden="true"&gt;&lt;/i&gt;
  </code></pre>
  
  <p>Thank you
  NJ</p>