Adding +/- to collapse menu - html

Question

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.
Collapsing table with html
Code: http://jsfiddle.net/5BRsy/3/
HTML
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table class="table2">
<th></th><th>server 1</th><th>server 2</th>
<tr><td class="btn">used</td><td>1gb</td><td>2gb</td></tr>
<tr><td class="expand1">drive 1</td><td class="expand1">0.5gb</td><td class="expand1">1gb</td></tr>
<tr><td class="expand1">drive 2</td><td class="expand1">0.5gb</td><td class="expand1">1gb</td></tr>
<tr><td class="btn2">available</td><td>1gb</td><td>2gb</td></tr>
<tr><td class="expand2">drive 1</td><td class="expand2">0.5gb</td><td class="expand2">1gb</td></tr>
<tr><td class="expand2">drive 2</td><td class="expand2">0.5gb</td><td class="expand2">1gb</td></tr>
<tr><td>total</td><td>2gb</td><td>4gb</td></tr>
</table>
CSS
.expand1 { display: none;
}
.expand2 { display: none;
}
JS
$(document).ready(function(){
$(".btn").click(function(){
$(".expand1").toggle();
});
$(".btn2").click(function(){
$(".expand2").toggle();
});
})

Answer 1

I updated your fiddle: http://jsfiddle.net/5BRsy/7/
Basically, you are adding some kind of html that you will use to represent your toggle. In your case I used <span>+</span>.
<tr><td class="btn"><span>+</span> used</td><td>1gb</td><td>2gb</td></tr>
Then, when you click the <span> (or the + sign I should say) you toggle the display of your content, as you were already doing, and then change your + to a -. Clicking it again toggles it back to the way things were.
$(document).ready(function(){
$(".btn span").click(function(){
if($(".btn span").html() == "+") {
$(".btn span").html("-");
} else {
$(".btn span").html("+");
}
$(".expand1").toggle();
});

Answer 2

To render the + and - you can try using :before pseudo-element, however it's just a trifle problem, the problem is your code, it's too messy indeed, I modified it much to make it more perfect. Fistly you don't need the classes expand1 and expand2 assigned to each td that way. You can take benefit of jQuery selectors to hide the rows initially and toggle the rows on click. Here is the modified code:
HTML:
<table>
<th></th><th>server 1</th><th>server 2</th>
<tr><td class="btn">used</td><td>1gb</td><td>2gb</td></tr>
<tr><td>drive 1</td><td>0.5gb</td><td>1gb</td></tr>
<tr><td>drive 2</td><td>0.5gb</td><td>1gb</td></tr>
<tr><td class="btn">available</td><td>1gb</td><td>2gb</td></tr>
<tr><td>drive 1</td><td>0.5gb</td><td>1gb</td></tr>
<tr><td>drive 2</td><td>0.5gb</td><td>1gb</td></tr>
<tr><td>total</td><td>2gb</td><td>4gb</td></tr>
</table>
CSS:
.btn:before {
content:'+ ';
vertical-align:middle;
}
.btn.expanded:before {
content:'- ';
vertical-align:top;
}
JS:
//hide the rows initially
$('.btn').closest('tr').nextUntil('tr:has(td.btn)')
.not(':last-child').toggle();
//register click handler on ready
$(document).ready(function(){
$(".btn").click(function(){
$(this).closest('tr').nextUntil('tr:has(td.btn)')
.not(':last-child').toggle();
$(this).toggleClass('expanded');
});
});
Demo.
You can see that the code is much more concise and cleaner. Here is some related references:
.closest()
:has()
.nextUntil()