this works:
CSS:
.show_hide {
display:none;
}
.plus:after {
content:" +";
}
.minus:after {
content:" -";
}
jQuery:
$(document).ready(function(){
$(".slidingDiv").hide();
$(".show_hide").addClass("plus").show();
$('.show_hide').toggle(
function(){
$(".slidingDiv").slideDown();
$(this).addClass("minus");
$(this).removeClass("plus");
},
function(){
$(".slidingDiv").slideUp();
$(this).addClass("plus");
$(this).removeClass("minus");
}
);
});
HTML:
<a href="#" class="show_hide">Show/hide</a>
<div class="slidingDiv" style="display: block;">
Check out the updated jQuery plugin for doing this: <a href="http://papermashup.com/jquery-show-hide-plugin/" class="show_hide" target="_blank" style="display: inline;">jQuery Show / Hide Plugin</a>
</div>
in the CSS, instead of content:" +";
You can put an background-image
(with background-position:right center;
and background-repeat:no-repeat
and maybe making the .show_hide
displayed as block and give him a width, so that the bg-image is not overlayed by the link-text itself).