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

Question

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. Does anybody know how I can get the little arrowbutton on there? (don't know what it's called..)

Thanks in advance!

Answer 1

Give it a height and a background image.

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

Answer 2

我现在意识到我也可以只使用ASCII箭头alt + 31▼和alt + 30▲