title: JavaScript expand/collapse changing image
body: <p>I have this piece of code</p>
  
  <p><a href="http://jsfiddle.net/nmggoqrg/" rel="nofollow">http://jsfiddle.net/nmggoqrg/</a></p>
  
  <pre><code>&lt;div class="container"&gt;
  &lt;div class="header"&gt;&lt;span class="glyphicon glyphicon-triangle-right"&gt;Expand&lt;/span&gt;
  
  &lt;/div&gt;
  &lt;div class="content"&gt;
      &lt;ul&gt;
          &lt;li&gt;This is just some random content.&lt;/li&gt;
          &lt;li&gt;This is just some random content.&lt;/li&gt;
          &lt;li&gt;This is just some random content.&lt;/li&gt;
          &lt;li&gt;This is just some random content.&lt;/li&gt;
      &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>    </p>
  
  <pre><code>  $(".header").click(function () {
  
  $header = $(this);
  //getting the next element
  $content = $header.next();
  //open up the content needed - toggle the slide- if visible, slide up, if not slidedown.
  $content.slideToggle(500, function () {
      //execute this after slideToggle is done
      //change text of header based on visibility of content div
      $header.text(function () {
          //change text based on condition
          return $content.is(":visible") ? "Expand -" : "Expand +";
      });
  });
  </code></pre>
  
  <p>});</p>
  
  <p>And would like some help, when clicking on expand, the page div expands to show the information. I would like for the header title to change from a right triangle to a bottom facing triangle. (the triangle being used are glyphicons from Bootstrap, the bottom arrow is "glyphicon glyphicon-triangle-bottom" class.) </p>
  
  <p>I am a bit of a noob (and still learning) when it comes to JavaScript and do not know how to add css classes to JavaScript.  </p>
  
  <p>Is this possible? </p>
  
  <p>Thank you </p>