jquery content toggle using .slideToggle()

Question

I'm making a content toggle using jquery and I don't know what to do next, I want the content toggle have an icon (-) when the toggle is open and (+) icon when the toggle is closed the problem is I don't know how to achieve it here's my code:

HTML

<div id="pane" class="menu_list">
  <p class="menu_head">Header-1</p>
    <div class="menu_body" style="background:#999;">
        the quick brownn fox jumps over the lazy dog
    </div>
</div>

Jquery

//slides the element with class "menu_body" when paragraph with class "menu_head" is clicked
$("#pane p.menu_head").click(function()
{
    $(this).css({backgroundImage:"url(minus.png)"}).next("div.menu_body").slideToggle(300);
});

Css

.menu_list {
    width: 100%;
}
.menu_head {
    padding: 5px 10px;
    cursor: pointer;
    position: relative;
    margin:1px;
       font-weight:bold;
       background: #eef4d3 url(plus.png) center right no-repeat;
}
.menu_body {
    display:none;
}

Answer 1

Use .toggleClass(class1,class2) to accomplish your task. Please read here to know more.

Try,

$("#pane p.menu_head").click(function(){
    $(this).toggleClass("plus minus").next("div.menu_body").slideToggle(300);
});

and CSS

.minus{ background-image:url(minus.png); }
.plus{ background-image:url(plus.png); }

DEMO

Answer 2

Add a new span in the header to hold the +/- then toggle it in the click hanlder

<div id="pane" class="menu_list">
    <p class="menu_head">Header-1<span>+</span>
    </p>
    <div class="menu_body" style="background:#999;">
        the quick brownn fox jumps over the lazy dog
    </div>
</div>

then

//slides the element with class "menu_body" when paragraph with class "menu_head" is clicked
$("#pane p.menu_head").click(function () {
    $(this).css({
        backgroundImage: "url(minus.png)"
    }).next("div.menu_body").slideToggle(300);
    $(this).find('span').text(function (_, text) {
        return text == '+' ? '-' : '+'
    });
});

Demo: Fiddle