how to make little arrowbutton on a <hr> (for slideUp/slideDown with JQuery)

quick question,

I have a <hr> and this script:

<script type="text/javascript" >
  $(function () {
         $("#hideClass").click(function () {
             if ($("div#bodyFake").is(":hidden")) {
                 $("div#bodyFake").slideDown();
             } else {
                 $("div#bodyFake").slideUp();
             }
         });
     });
 </script>

atm the script is meant to hide the entire body (this was just to test if it worked because I had some JQuery problems)

however, I would now like to have a little arrow/button on the right side of <hr> so I can hide the div (the 1 table) underneath it.

Thanks in advance!

Give it a height and a background image.

hr {
 background-image:url(....);
 background-position:right top;
 background-repeat:no-repeat;  
 height:20px;   
}

I now realize I could also have just used the ASCII-arrow alt+31 ▼ and alt+30 ▲