title: How to use CSS to modify an icon with the bootstrap collapse
body: <p>I'm trying to build a list with subpoints that collapse on command using the bootstrap collapse. This has worked fine, but I need to add an arrow that points right when the collapse is up, and down when it's dropped down.</p>
  
  <p>This is my HTML...</p>
  
  <pre><code>&lt;ul&gt;
  &lt;li data-toggle="collapse" data-target="#Sub1"&gt;List Item One &lt;em class="glyphicon glyphicon-chevron-right"&gt;&lt;/em&gt;&lt;em class="glyphicon glyphicon-chevron-down"&gt;&lt;/em&gt;
  &lt;ul class="collapse" id="Sub1"&gt;
  &lt;li&gt;Sub-item&lt;/li&gt;
  &lt;/ul&gt;
  &lt;li&gt;List Item Two&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>Currently I'm using this CSS to modify it...</p>
  
  <pre><code>.collapse {display: none;}
  .collapse.in {display: block;}
  .collapsed &gt; .glyphicon .glyphicon-chevron-down {display: inline-block;}
  .collapsed &gt; .glyphicon .glyphicon-chevron-right {display: none;}
  </code></pre>
  
  <p><a href="http://jsfiddle.net/ddx0c3c2/" rel="nofollow">http://jsfiddle.net/ddx0c3c2/</a></p>
  
  <p>The problem I'm encountering is that both icons are displaying, and not disappearing when the class changes. Is it possible to do this with just CSS, or do I need to use jQuery?</p>