title: How to insert css arrow into html page and make it clickable
body: <p>Hello guys I'm making a FAQ page for a project in my uni, and I've got everything working, but I wanted to make it look nicer. I made an arrow into a css file, and I wanted to put it into my html. In my html there are headers which have a button that shows and hide the content thanks to jQuery. My question is: how can I put the arrow in each header and make it clickable so I can delete the button and by clicking the header it self will display the content? </p>
  
  <p>Thanks for your help</p>
  
  <p>Here is my CSS:</p>
  
  <pre><code>    &lt;!DOCTYPE html&gt;
      &lt;html&gt;
      &lt;head&gt;
      &lt;style&gt;
      .body
      {
      padding: 10px 6px;
      height: 0;
      background: #ff4400;
      display:inline-block;
      margin:0 0 0 -4px;
      z-index:999;
      }
  
      .arrow
      {
      width: 0px;
      height: 0px;
      border-style: solid;
      border-width: 10px 0 10px 15px;
      border-color: transparent transparent transparent #ff4400;
      display: inline-block;
      margin: 0 0 0 -5px;
      }
  
      &lt;/style&gt;
      &lt;/head&gt;
  
      &lt;body&gt;
  
      &lt;div class="body"&gt;&lt;/div&gt;
      &lt;div class="arrow"&gt;&lt;/div&gt;
  
      &lt;/body&gt;
      &lt;/html&gt;
  </code></pre>
  
  <p>This is my html file</p>
  
  <pre><code>    &lt;!DOCTYPE html&gt;
      &lt;html&gt;
      &lt;head&gt;
      &lt;script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"&gt;
      &lt;/script&gt;
      &lt;script&gt;
      $(document).ready(function(){
          $(".button").click(function () {
             var div= $("#"+this.value);
        div.toggle("slow").siblings().hide("slow");
      });
      });  
      &lt;/script&gt;
      &lt;/head&gt;
      &lt;body&gt;
      &lt;title&gt;FAQ&lt;/title&gt;
      &lt;h&gt;&lt;font size="7"&gt;FAQ&lt;/font&gt;&lt;font size= "5.5"&gt;Most frequently asked questions&lt;/font&gt;&lt;/h&gt;
      &lt;div id="buttonDiv"&gt;&lt;/div&gt;    
  
      &lt;!-- setting BUTTON 1--&gt;
      &lt;h1&gt;&lt;font size="5"&gt;QUESTION 1&lt;/font&gt;&lt;button id="button1" type="button" class="button" value="Show1"&gt;Show/Hide&lt;/button&gt;&lt;/h1&gt;
      &lt;!--------------------QUESTION 1 ---------------------------------------------&gt;  
  
      &lt;div&gt;
        &lt;div id="Show1" style="display:none"&gt;
          Answer to the question 1
       &lt;/div&gt;   
      &lt;/div&gt;
  
  
      &lt;/body&gt;
      &lt;/html&gt;
  </code></pre>