title: How to add a plus/minus sign to a jquery accordion
body: <p>I have the following simple html code:</p>
  
  <pre><code>   &lt;div id="menu"&gt;
  
          &lt;h3&gt;&lt;span class="panel-icon"&gt;+&lt;/span&gt; Slide up/down&lt;/h3&gt;
          &lt;span class="panel"&gt;
          &lt;p&gt;Now you see me!&lt;/p&gt;
          &lt;/span&gt;
  
          &lt;h3&gt;&lt;span class="panel-icon"&gt;+&lt;/span&gt; Slide Up/Down&lt;/h3&gt;
          &lt;span class="panel"&gt;
          &lt;p&gt;Now you see me!&lt;/p&gt;
          &lt;/span&gt;
  
      &lt;/div&gt;
  </code></pre>
  
  <p>and I use the accordion function from jQuery to open and close the content under each header:</p>
  
  <pre><code>$(document).ready(function(){
    $("#menu").accordion({collapsible: true, active: false, animate: 500,});
  });
  </code></pre>
  
  <p>The accordion itself works perfectly. 
  However, I don't know how I can swich between a plus and a minus icon based if the content is shown or not.</p>
  
  <p>I thought the code might be something like this:</p>
  
  <pre><code>$(document).ready(fucntion(){
  
    if ((".panel") == visibility = collapse) {
    $(".panel-icon").html("-");
    }
    else if ((".panel1") == visibility = hidden){
    $(".panel-icon").html("+");   
    }
  
  });
  </code></pre>
  
  <p>or maybe something similar to this way:</p>
  
  <pre><code>$(document).ready(function(){
          $('.panel-icon').text(function(_, txt) {
          return txt === "+" ? "-" : "+";
          });
  });
  </code></pre>
  
  <p>I am very new to the jQuery programming so I hope you can help me.
  Thank you :-)</p>