title: Adding +/- to collapse menu
body: <p>Here's what I was able to get working with help from someone on here. However, I'd like to add it to include the -/+ when expanding/collapsing the rows.</p>
  
  <p><a href="https://stackoverflow.com/questions/23812997/collapsing-table-with-html/23813269?noredirect=1#comment36633967_23813269">Collapsing table with html</a></p>
  
  <p>Code: <a href="http://jsfiddle.net/5BRsy/3/" rel="nofollow noreferrer">http://jsfiddle.net/5BRsy/3/</a></p>
  
  <p>HTML</p>
  
  <pre><code>&lt;script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"&gt;&lt;/script&gt;
  
  &lt;table class="table2"&gt;
  &lt;th&gt;&lt;/th&gt;&lt;th&gt;server 1&lt;/th&gt;&lt;th&gt;server 2&lt;/th&gt;
  &lt;tr&gt;&lt;td class="btn"&gt;used&lt;/td&gt;&lt;td&gt;1gb&lt;/td&gt;&lt;td&gt;2gb&lt;/td&gt;&lt;/tr&gt;
  &lt;tr&gt;&lt;td class="expand1"&gt;drive 1&lt;/td&gt;&lt;td class="expand1"&gt;0.5gb&lt;/td&gt;&lt;td class="expand1"&gt;1gb&lt;/td&gt;&lt;/tr&gt;
  &lt;tr&gt;&lt;td class="expand1"&gt;drive 2&lt;/td&gt;&lt;td class="expand1"&gt;0.5gb&lt;/td&gt;&lt;td class="expand1"&gt;1gb&lt;/td&gt;&lt;/tr&gt;
  
  &lt;tr&gt;&lt;td class="btn2"&gt;available&lt;/td&gt;&lt;td&gt;1gb&lt;/td&gt;&lt;td&gt;2gb&lt;/td&gt;&lt;/tr&gt;
  &lt;tr&gt;&lt;td class="expand2"&gt;drive 1&lt;/td&gt;&lt;td class="expand2"&gt;0.5gb&lt;/td&gt;&lt;td class="expand2"&gt;1gb&lt;/td&gt;&lt;/tr&gt;
  &lt;tr&gt;&lt;td class="expand2"&gt;drive 2&lt;/td&gt;&lt;td class="expand2"&gt;0.5gb&lt;/td&gt;&lt;td      class="expand2"&gt;1gb&lt;/td&gt;&lt;/tr&gt;
  &lt;tr&gt;&lt;td&gt;total&lt;/td&gt;&lt;td&gt;2gb&lt;/td&gt;&lt;td&gt;4gb&lt;/td&gt;&lt;/tr&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>CSS </p>
  
  <pre><code>.expand1 { display: none;
  }
  
  .expand2 { display: none;
  }
  </code></pre>
  
  <p>JS</p>
  
  <pre><code>$(document).ready(function(){
    $(".btn").click(function(){
       $(".expand1").toggle();
    });
    $(".btn2").click(function(){
       $(".expand2").toggle();
    });
  })
  </code></pre>