title: jQuery expandable div with plus and minus icons
body: <p>I'm trying to create a simple accordion div that opens upwards. I have my accordion working nicely. But I now want to add plus and minus icons to the accordion.</p>
  
  <p>I have it somewhat working below on codepen here.    <a href="http://codepen.io/Davabo/pen/jqzgxQ" rel="nofollow">http://codepen.io/Davabo/pen/jqzgxQ</a></p>
  
  <p>HTML</p>
  
  <pre><code>&lt;div class="accordion"&gt;
    &lt;div class="info"&gt;test text here&lt;/div&gt;
    &lt;h3&gt;&lt;span class="plus"&gt;+&lt;/span&gt; More Info&lt;/h3&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Javascript</p>
  
  <pre><code>var $accordionIO = $('.accordion h3');
  $accordionIO.prev('div').hide();
  
  $accordionIO.click(function() {
    $(this).prev('div').slideToggle();
  });
  
  $(".accordion h3").click(function() {
    //Inner 
    var jqInner = $(this).next();
    if (jqInner.is(":visible")) {
      jqInner.slideUp()
      $(this).find('.plus').html('+');
    } else
  
    {
      jqInner.slideDown()
      $(this).find('.plus').html('-');
    }
  })
  </code></pre>
  
  <p>As you can see, the accordion works nicely, and i have my plus and minus icons somewhat working. The problem is that when the accordion is expanded, the icon turns into a minus like expected, but when the accordion is closed again, the icon remains a minus when it should have gone back to a plus.</p>