title: how to make little arrowbutton on a <hr> (for slideUp/slideDown with JQuery)
body: <p>quick question,</p>
  
  <p>I have a <code>&lt;hr&gt;</code> and this script:</p>
  
  <pre><code>&lt;script type="text/javascript" &gt;
    $(function () {
           $("#hideClass").click(function () {
               if ($("div#bodyFake").is(":hidden")) {
                   $("div#bodyFake").slideDown();
               } else {
                   $("div#bodyFake").slideUp();
               }
           });
       });
   &lt;/script&gt;
  </code></pre>
  
  <p>atm the script is meant to hide the entire body (this was just to test if it worked because I had some JQuery problems)</p>
  
  <p>however, I would now like to have a little arrow/button on the right side of <code>&lt;hr&gt;</code> so I can hide the div (the 1 table) underneath it.
  <img src="https://i.stack.imgur.com/Kq6HH.png" alt="screenshot">
  Does anybody know how I can get the little arrowbutton on there? (don't know what it's called..) </p>
  
  <p>Thanks in advance!</p>