title: How to use jQuery to switch between a plus and minus sign on collapse and expand?
body: <p>I am using the code below. What I want to do is have a <strong>+</strong> or <strong>-</strong> sign on expanded or collapsed view. How can I do that? Here is the code:</p>
  
  <pre><code>&lt;!--//---------------------------------+
  //  Developed by Roshan Bhattarai  |
  //  http://roshanbh.com.np         |
  //  Fell Free to use this script   |
  //---------------------------------+--&gt;
  &lt;title&gt;Collapsible Message Panels&lt;/title&gt;
  &lt;script type="text/javascript" src="jquery.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript"&gt;
  $(document).ready(function(){
      //hide the all of the element with class msg_body
      $(".msg_body").show();
      //toggle the componenet with class msg_body
      $(".msg_head").click(function(){
          $(this).next(".msg_body").slideToggle(100);
      });
  });
  &lt;/script&gt;
  &lt;style type="text/css"&gt;
  body {
      margin: 10px auto;
      width: 570px;
      font: 75%/120% Verdana,Arial, Helvetica, sans-serif;
  }
  p {
      padding: 0 0 1em;
  }
  .msg_list {
      margin: 0px;
      padding: 0px;
      width: 383px;
  }
  .msg_head {
      padding: 5px 10px;
      cursor: pointer;
      position: relative;
      background-color:#FFCCCC;
      margin:1px;
  }
  .msg_body {
      padding: 5px 10px 15px;
      background-color:#F4F4F8;
  }
  &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;div align="center"&gt;
    &lt;p&gt;Click on the each news head to toggle
  &lt;/p&gt;
  
  &lt;/div&gt;
  &lt;div class="msg_list"&gt;
          &lt;p class="msg_head"&gt;Header-1 &lt;/p&gt;
          &lt;div class="msg_body"&gt;
              orem ipsum dolor sit amet
          &lt;/div&gt;
  
          &lt;p class="msg_head"&gt;Header-2&lt;/p&gt;
          &lt;div class="msg_body"&gt;
              consectetuer adipiscing elit orem ipsum dolor sit amet
          &lt;/div&gt;
  &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>