title: I want to meet the following conditions by jquery but I am getting error somehow
body: <p>I want to do all the following by jQuery and my HTML as well as CSS is below.</p>
  <ol>
  <li>The paragraphs start hidden.</li>
  <li>The paragraphs show and hide when their headings are clicked.</li>
  <li>This process should take 3 seconds.</li>
  <li>Mousing over the paragraph will reverse the colours of the text and background.</li>
  <li>Mousing out will switch the colours back to their original values</li>
  </ol>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>jQuery(document).ready(function () {
      jQuery('.contentBox').css('display', 'none');//SELECT BY CLASS
  $('h2').click(function(){
      $(this).next('p').slideToggle();
  });
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>body {
      background: tan;
  }
  
  h1 {
      margin-left: 150px;
  }
  
  h2 {
      margin-bottom: 2px;
      padding: 3px 0 2px 25px;
      background: #D99E50;
  }
  
  p {
      margin-top: 0;
      padding-top: 0;
  }
  
  #mainContain {
      background: #523C1E;
      width: 80%;
      margin: 0 auto;
      padding: 30px 0;
  }
  
  .contentBox {
      background: #524737;
      /*Paragraph background color*/
      padding: 15px;
      color: #FFE5C3;
      /*Paragraph font colour*/
  }
  
  /*Text Panel Styling*/
  .panelContainer {
      background: #523C1E;
      width: 80%;
      margin: 0 auto;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!doctype html&gt;
  &lt;html lang="en"&gt;
  
  &lt;head&gt;
      &lt;!--ADD jQUERY FIRST!--&gt;
      &lt;script type="text/javascript" src="jquery-3.6.0.min.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="lab10-1-jquery.js"&gt;&lt;/script&gt;
      &lt;link rel="stylesheet" href="lab10-1-jquery.css" /&gt;
  
      &lt;meta charset="utf-8" /&gt;
      &lt;title&gt;jQuery FAQ Page&lt;/title&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
      &lt;h1 id="headTitle"&gt;Frequently Asked Questions&lt;/h1&gt;
      &lt;div id="mainContain"&gt;
          &lt;!--MAIN CONTENT CONTAINER--&gt;
  
          &lt;div class="panelContainer"&gt;
              &lt;!-- 1ST PANEL--&gt;
              &lt;h2 id="h21"&gt;Do I need a website?&lt;/h2&gt;
              &lt;p class="contentBox"&gt;Morbi hendrerit accumsan orci, tristique aliquam nunc suscipit nec. Vestibulum
                  consequat ornare nunc, ac tristique urna cursus id. Cras eu viverra leo, vitae rhoncus dui. Vestibulum
                  rutrum neque ac risus eleifend luctus. Phasellus ultrices, enim quis dignissim tempus, nibh sem faucibus
                  nisi, at blandit velit massa in nunc. Praesent enim libero, blandit sed massa ut, imperdiet dictum odio.
                  Maecenas sagittis neque a est porta, at feugiat nulla tempor. Cras vitae tincidunt quam, non interdum
                  quam. Sed imperdiet lacus nibh, eget viverra eros porta ut. Nulla sed tellus velit. Nullam quam dolor,
                  malesuada eget bibendum a, lacinia ac ante.&lt;/p&gt;
          &lt;/div&gt;
  
          &lt;div class="panelContainer"&gt;
              &lt;!-- 2ND PANEL--&gt;
              &lt;h2&gt;What is SEO?&lt;/h2&gt;
              &lt;p class="contentBox"&gt;Aliquam felis orci, varius nec facilisis nec, eleifend ac ante. Donec ligula est,
                  dapibus sed volutpat sit amet, pellentesque id sem. Vestibulum imperdiet volutpat dignissim. Morbi
                  tincidunt lobortis libero et placerat. Pellentesque dignissim diam laoreet, ultricies ligula aliquam,
                  consectetur sapien. Praesent luctus orci in vulputate tincidunt. Aenean fermentum ante non elementum
                  convallis. Sed eget magna enim.&lt;/p&gt;
          &lt;/div&gt;
  
          &lt;div class="panelContainer"&gt;
              &lt;!-- 3RD PANEL--&gt;
              &lt;h2&gt;What is a content management system?&lt;/h2&gt;
              &lt;p class="contentBox"&gt;Morbi hendrerit accumsan orci, tristique aliquam nunc suscipit nec. Vestibulum
                  consequat ornare nunc, ac tristique urna cursus id. Cras eu viverra leo, vitae rhoncus dui. Vestibulum
                  rutrum neque ac risus eleifend luctus. Phasellus ultrices, enim quis dignissim tempus, nibh sem faucibus
                  nisi, at blandit velit massa in nunc. Praesent enim libero, blandit sed massa ut, imperdiet dictum odio.
                  Maecenas sagittis neque a est porta, at feugiat nulla tempor. Cras vitae tincidunt quam, non interdum
                  quam. Sed imperdiet lacus nibh, eget viverra eros porta ut. Nulla sed tellus velit. Nullam quam dolor,
                  malesuada eget bibendum a, lacinia ac ante.&lt;/p&gt;
          &lt;/div&gt;
  
          &lt;div class="panelContainer"&gt;
              &lt;!-- 4TH PANEL--&gt;
              &lt;h2&gt;Do I need a blog?&lt;/h2&gt;
              &lt;p class="contentBox"&gt;Aliquam felis orci, varius nec facilisis nec, eleifend ac ante. Donec ligula est,
                  dapibus sed volutpat sit amet, pellentesque id sem. Vestibulum imperdiet volutpat dignissim. Morbi
                  tincidunt lobortis libero et placerat. Pellentesque dignissim diam laoreet, ultricies ligula aliquam,
                  consectetur sapien. Praesent luctus orci in vulputate tincidunt. Aenean fermentum ante non elementum
                  convallis. Sed eget magna enim.&lt;/p&gt;
          &lt;/div&gt;
  
      &lt;/div&gt;
      &lt;!--END mainContain--&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>