How to use jQuery to switch between a plus and minus sign on collapse and expand?

jquery, jquery-plugins, jquery-ui

Solution

Change the markup of the `msg_head` to something like this-

<p class="msg_head">Header-1 <span>[-]</span></p>

and change the toggle function to look like this-

$(".msg_head").click(function(){
    $(this).next(".msg_body").slideToggle(100);
})
.toggle( function() {
    $(this).children("span").text("[+]");
}, function() {
    $(this).children("span").text("[-]");
});

Problem

I am using the code below. What I want to do is have a + or - sign on expanded or collapsed view. How can I do that? Here is the code: ``` <!--//---------------------------------+ // Developed by Roshan Bhattarai | // http://roshanbh.com.np | // Fell Free to use this script | //---------------------------------+--> <title>Collapsible Message Panels</title> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> $(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); }); }); </script> <style type="text/css"> 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; } </style> </head> <body> <div align="center"> <p>Click on the each news head to toggle </p> </div> <div class="msg_list"> <p class="msg_head">Header-1 </p> <div class="msg_body"> orem ipsum dolor sit amet </div> <p class="msg_head">Header-2</p> <div class="msg_body"> consectetuer adipiscing elit orem ipsum dolor sit amet </div> </div> </body> </html> ```

Original source