title: Jquery toggle div on button click - not toggling
body: <p>I'm attempting to get a div to toggle when you click the button above it. I'm not sure what is wrong with my code, but it isn't working. </p>
  
  <p>EDITED WITH STYLE TAGS IN CORRECT PLACES. The code still isn't working though.</p>
  
  <p>CSS file:</p>
  
  <pre><code>&lt;head&gt;
      &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript"&gt;
           /*CV Script*/
  
          &lt;script&gt;$(document).ready(function(){
              $('#button8').click(function(){
              $('#conference8').toggle('slow');
              });
              });
              &lt;/script&gt;
         &lt;style&gt;
         #conference8 {
              padding-left: 4em;
          }
          .button {
              display: inline-block;
              padding: 2px;
              font-size: .8em;
              cursor: pointer;
          }
          .button:active {
              transform: translateY(2px);
          }
      &lt;/style&gt;
      &lt;/head&gt;
  </code></pre>
  
  <p>HTML:</p>
  
  <pre><code>&lt;button id="button8"&gt;Abstract&lt;/button&gt;
          &lt;div id="conference8"&gt;blah blah blah&lt;/div&gt;
  </code></pre>