Show Hide With Jquery Want to add a Minus Sign when it is showing

Show Hide With Jquery Want to add a Minus Sign when it is showing

I am using the following code, which is working great but I would like to
switch out the <div id"Show"> with the <div id"hide"> when the Show is
active. Does anyone know how to do this?
<!--Script for Show Hide-->
<script
src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("#hide").click(function(){
$("#aboutcontent").hide();
});
$("#show").click(function(){
$("#aboutcontent").show();
});
});
</script>
<!--/script for show hide-->
HTML:
<div class="homepage-acecontent">
<div id="show"><img align="left" style="margin-right:5px;"
src="/template/images/btn-expand.png" border="0" alt="" /> ABOUT GENUINE
H-D^&reg; WORK WEAR</div>
<div id="hide"><img align="left" style="margin-right:5px;"
src="/template/images/btn-close.png" border="0" alt="" /></div>
<div id="aboutcontent">Content to show and hide goes
here<!--/aboutcontent--></div>
<!--/homepage-acecontent--></div>
CSS:
.homepage-acecontent{float:left; width: 1148px; color:#ff6418;
font-size:11px; font-weight:bold; margin-left:40px;}
#aboutcontent{float:left; width: 1148px; color:#fff; font-size:14px;
font-weight:normal; **display:none;**}
#aboutcontent a:link, #aboutcontent a:visited{color:#ff6418;
text-decoration:none;}
#aboutcontent a:hover{color:#f68428;}
#show{cursor:pointer;}