jQuery doesn't work with javascript functions?
<p>I wrote some javascript functions and it works. My instructor said to use jQuery to show/hide the grade instructions. The javascript functions were working fine, but after I put the jQuery in there, nothing works. How can I get the show/hide to work and my javascript functions?</p>

<p>You can check it out here: <a href="http://hills.ccsf.edu/~ryan/studentgrade.html" rel="nofollow">http://hills.ccsf.edu/~ryan/studentgrade.html</a></p>

<p>The code is here: <a href="http://pastebin.com/p5S0HCP7" rel="nofollow">http://pastebin.com/p5S0HCP7</a></p>

<pre><code>&lt;html&gt;
  &lt;head&gt;
    &lt;title&gt;
      Student Grades
    &lt;/title&gt;
    &lt;script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"&gt;&lt;/script&gt;
    &lt;script&gt;

    $(document).ready(function(){
      $("#flip").click(function(){
        $("#panel").slideToggle("slow");
      });
    });

    function validateForm() {
      var hwAvg = document.forms["score"]["hwavg"].value;
      var midExam = document.forms["score"]["midexam"].value;
      var finalExam = document.forms["score"]["finalexam"].value;
      var acr = document.forms["score"]["acr"].value;

      } else if (validateNumber(midExam)) {
        window.alert("Midterm exam must be between 0 and 100");
      } else if (validateNumber(finalExam)) {
        window.alert("Final exam must be between 0 and 100");
      } else if (validateNumber(acr)) {
        window.alert("After completion report must be between 0 and 100");
      } else {
        finalAverage = (.5 * parseInt(hwAvg) + (.2 * midExam) + (.2 * finalExam) + (.1 * acr));
        showResult(finalAverage);
      }

    }

    function validateNumber(num) {
      checkNum = isNaN(Number(num));
      if(checkNum) {
        return true;
      } else {
        if(num == "") {
            return true;
        } else if (num &lt; 0 || num &gt; 100) {
            return true;
        }
      }
    }

    function showResult(finalAvg) {
        if(finalAvg &gt;= 0 &amp;&amp; finalAvg &lt;= 59) {
          document.getElementById("result").value = "Score: " + parseInt(finalAvg) + " Grade: F";
        } else if (finalAvg &gt;= 60 &amp;&amp; finalAvg &lt;= 69) {
          document.getElementById("result").value = "Score: " + parseInt(finalAvg) + " Grade: D";
        } else if (finalAvg &gt;= 70 &amp;&amp; finalAvg &lt;= 79) {
          document.getElementById("result").value = "Score: " + parseInt(finalAvg) + " Grade: C";
        } else if (finalAvg &gt;= 80 &amp;&amp; finalAvg &lt;= 89) {
          document.getElementById("result").value = "Score: " + parseInt(finalAvg) + " Grade: B";
        } else if (finalAvg &gt;= 90 &amp;&amp; finalAvg &lt;= 100) {
          document.getElementById("result").value = "Score: " + parseInt(finalAvg) + " Grade: A";
        }
    }
    &lt;/script&gt;
    &lt;style type="text/css"&gt;
    #panel {
      display: none;
    }
    &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;h1&gt;Student Grades&lt;/h1&gt;
    &lt;div id="flip"&gt;Click to input values&lt;/div&gt;
    &lt;div id="panel"&gt;
      &lt;form id="score" name="score"&gt;
        &lt;p&gt;Please enter a score between 0-100&lt;/p&gt;
        &lt;p&gt;Student's homework average: &lt;input class="required" type="text" name="hwavg" /&gt;&lt;/p&gt;
        &lt;p&gt;Student's midterm exam score: &lt;input type="text" name="midexam" /&gt;&lt;/p&gt;
        &lt;p&gt;Student's final exam score: &lt;input type="text" name="finalexam" /&gt;&lt;/p&gt;
        &lt;p&gt;Student's after completetion report: &lt;input type="text" name="acr" /&gt;&lt;/p&gt;
        &lt;p&gt;Results: &lt;input type="text" id="result" name="result" /&gt;&lt;/p&gt;
        &lt;p&gt;&lt;input type="button" value="Submit scores" onclick="validateForm()" /&gt; &lt;input type="reset" onclick="window.location.reload();" value="Reset" /&gt;&lt;/p&gt;
      &lt;/form&gt;
    &lt;/div&gt;
  &lt;/body&gt;
&lt;/html&gt;
</code></pre>
