I want to meet the following conditions by jquery but I am getting error somehow-CodePudding

I want to do all the following by jQuery and my HTML as well as CSS is below.

The paragraphs start hidden.
The paragraphs show and hide when their headings are clicked.
This process should take 3 seconds.
Mousing over the paragraph will reverse the colours of the text and background.
Mousing out will switch the colours back to their original values

jQuery(document).ready(function () {
    jQuery('.contentBox').css('display', 'none');//SELECT BY CLASS
$('h2').click(function(){
    $(this).next('p').slideToggle();
});
});

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;
}

<!doctype html>
<html lang="en">

<head>
    <!--ADD jQUERY FIRST!-->
    <script type="text/javascript" src="jquery-3.6.0.min.js"></script>
    <script type="text/javascript" src="lab10-1-jquery.js"></script>
    <link rel="stylesheet" href="lab10-1-jquery.css" />

    <meta charset="utf-8" />
    <title>jQuery FAQ Page</title>
</head>

<body>
    <h1 id="headTitle">Frequently Asked Questions</h1>
    <div id="mainContain">
        <!--MAIN CONTENT CONTAINER-->

        <div >
            <!-- 1ST PANEL-->
            <h2 id="h21">Do I need a website?</h2>
            <p >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.</p>
        </div>

        <div >
            <!-- 2ND PANEL-->
            <h2>What is SEO?</h2>
            <p >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.</p>
        </div>

        <div >
            <!-- 3RD PANEL-->
            <h2>What is a content management system?</h2>
            <p >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.</p>
        </div>

        <div >
            <!-- 4TH PANEL-->
            <h2>Do I need a blog?</h2>
            <p >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.</p>
        </div>

    </div>
    <!--END mainContain-->
</body>

</html>

CodePudding user response：

While you seem to have achieved points 1 and 2 already, the easiest way to achieve points 3-5 is as follows, with explanatory code in the comments:

jQuery(document).ready(function() {
  jQuery('.contentBox').css('display', 'none');
  $('h2').click(function() {
    $(this).next('p')
      // to address point 3: here we supply a 'duration' argument
      // of 3000; this is in milliseconds, so this is equal to 3 seconds:
      .slideToggle(3000);
  });
});

// caching the values as CSS custom properties
// you wish to use as the color, and background-
// color, of the p.contentBox elements:
:root {
  --color: #FFE5C3;
  --bgColor: #524737;
}

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 {
  /* to address point 5 (and point 4), here we set
     the default color of the element(s), using the
     CSS var() function to supply thevalue held in
     the named custom property: */
  background-color: var(--bgColor);
  /* And again: */
  color: var(--color);
  padding: 15px;
}

.contentBox:hover {
  /* for point 4: here we do the same, yet again, but
     reverse the properties, so the color is now set
     to the color of the '--bgColor' custom property: */
  color: var(--bgColor);
  /* ...and the background-color is set to the value
     of the '--color' custom property: */
  background-color: var(--color);
}

/*Text Panel Styling*/
.panelContainer {
  background: #523C1E;
  width: 80%;
  margin: 0 auto;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h1 id="headTitle">Frequently Asked Questions</h1>
<div id="mainContain">
  <!--MAIN CONTENT CONTAINER-->
  <div >
    <!-- 1ST PANEL-->
    <h2 id="h21">Do I need a website?</h2>
    <p >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.</p>
  </div>

  <div >
    <!-- 2ND PANEL-->
    <h2>What is SEO?</h2>
    <p >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.</p>
  </div>

  <div >
    <!-- 3RD PANEL-->
    <h2>What is a content management system?</h2>
    <p >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.</p>
  </div>

  <div >
    <!-- 4TH PANEL-->
    <h2>Do I need a blog?</h2>
    <p >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.</p>
  </div>

</div>

JS Fiddle.

It's worth noting that a 3000ms animation is slow, and may be perceived as a lack of responsiveness in your site. This may, or may not, be a problem for you but it's worth testing with your users. My personal inclination is to animate for around 0.4s (400ms), but my use-cases may not reflect your own.

References:

CSS:
- :root.
- CSS custom properties.
- var().
jQuery:
- slideToggle().

CodePudding user response：

To have the slide toggle animation take 3 seconds provide an argument to slideToggle() which is the number of milliseconds the animation should take. In this case, 3000, but note that this is very slow. I'd suggest that you shouldn't make effects last longer than around 500ms.

To have the p styling change on mouse hover, use the :hover pseudo selector in your CSS.

In addition, it's better practice to always use CSS to hide content which should not be visible when the page loads. This is in order to avoid a FOUC, which can happen due to JS running after the DOM has fully loaded and been rendered to the screen.

jQuery($ => {
  $('h2').on('click', e => $(e.target).next('p').slideToggle(3000));
});

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 {
  display: none; 
  background: #524737;
  padding: 15px;
  color: #FFE5C3;
}
.contentBox:hover {
  background: #FFE5C3;
  color: #524737;
}

.panelContainer {
  background: #523C1E;
  width: 80%;
  margin: 0 auto;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

<h1 id="headTitle">Frequently Asked Questions</h1>
<div id="mainContain">
  <div >
    <h2 id="h21">Do I need a website?</h2>
    <p >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.</p>
  </div>
  <div >
    <h2>What is SEO?</h2>
    <p >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.</p>
  </div>
  <div >
    <h2>What is a content management system?</h2>
    <p >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.</p>
  </div>
  <div >
    <h2>Do I need a blog?</h2>
    <p >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.</p>
  </div>
</div>