Bootstrap 4 Collapse show state with Font Awesome icon
<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>