title: Change Plus to Minus Sign When Collapsed By Altering :before
body: <p>As the title suggests, I want to change the plus sign to a minus sign when it is collapsed by altering the plus:before (by displaying none or something so it looks like a minus sign.) Currntly my code works and collapses as intended. Demo <a href="http://codepen.io/anon/pen/pRjZwL" rel="nofollow noreferrer">here</a>.</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;div class="box"&gt;
    &lt;div class="box-item"&gt;
      &lt;p&gt;Item #1&lt;span class="plus"&gt;&lt;/span&gt;&lt;/p&gt;
      &lt;ul&gt;
        &lt;li&gt;List Item #1&lt;/li&gt;
        &lt;li&gt;List Item #2&lt;/li&gt;
      &lt;/ul&gt;
    &lt;/div&gt;
  
    &lt;div class="box-item"&gt;
      &lt;p&gt;Item #2&lt;span class="plus"&gt;&lt;/span&gt;&lt;/p&gt;
      &lt;ul style=""&gt;
        &lt;li&gt;List Item #1&lt;/li&gt;
        &lt;li&gt;List Item #2&lt;/li&gt;
      &lt;/ul&gt;
    &lt;/div&gt;
  
    &lt;div class="box-item"&gt;
      &lt;p&gt;Item #3&lt;span class="plus"&gt;&lt;/span&gt;&lt;/p&gt;
      &lt;ul style=""&gt;
        &lt;li&gt;List Item #1&lt;/li&gt;
        &lt;li&gt;List Item #2&lt;/li&gt;
      &lt;/ul&gt;
    &lt;/div&gt;
  
    &lt;div class="box-item"&gt;
      &lt;p&gt;Item #4&lt;span class="plus"&gt;&lt;/span&gt;&lt;/p&gt;
      &lt;ul style=""&gt;
        &lt;li&gt;List Item #1&lt;/li&gt;
        &lt;li&gt;List Item #2&lt;/li&gt;
      &lt;/ul&gt;
    &lt;/div&gt;
  
    &lt;div class="box-item"&gt;
      &lt;p&gt;Item #5&lt;span class="plus"&gt;&lt;/span&gt;&lt;/p&gt;
      &lt;ul style=""&gt;
        &lt;li&gt;List Item #1&lt;/li&gt;
        &lt;li&gt;List Item #2&lt;/li&gt;
      &lt;/ul&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>jQuery</strong></p>
  
  <pre><code>$(document).ready(function () { 
    $('.box p').click(function(){
      var target = $(this).parent().children('.box ul');
      if (!target.is(":visible")) {
        $('.box ul').slideUp();
        $(target).slideDown();
      } else {
        $(target).slideUp();
      }
    });
  });
  </code></pre>