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

JinalPatel
April 11, 2022
199 views
2 votes
6 Answers

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 class="panelContainer">
            <!-- 1ST PANEL-->
            <h2 id="h21">Do I need a website?</h2>
            <p class="contentBox">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 class="panelContainer">
            <!-- 2ND PANEL-->
            <h2>What is SEO?</h2>
            <p class="contentBox">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 class="panelContainer">
            <!-- 3RD PANEL-->
            <h2>What is a content management system?</h2>
            <p class="contentBox">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 class="panelContainer">
            <!-- 4TH PANEL-->
            <h2>Do I need a blog?</h2>
            <p class="contentBox">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>

Answers

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 class="panelContainer">
    <h2 id="h21">Do I need a website?</h2>
    <p class="contentBox">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 class="panelContainer">
    <h2>What is SEO?</h2>
    <p class="contentBox">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 class="panelContainer">
    <h2>What is a content management system?</h2>
    <p class="contentBox">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 class="panelContainer">
    <h2>Do I need a blog?</h2>
    <p class="contentBox">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>

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 class="panelContainer">
    <!-- 1ST PANEL-->
    <h2 id="h21">Do I need a website?</h2>
    <p class="contentBox">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 class="panelContainer">
    <!-- 2ND PANEL-->
    <h2>What is SEO?</h2>
    <p class="contentBox">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 class="panelContainer">
    <!-- 3RD PANEL-->
    <h2>What is a content management system?</h2>
    <p class="contentBox">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 class="panelContainer">
    <!-- 4TH PANEL-->
    <h2>Do I need a blog?</h2>
    <p class="contentBox">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().

Here is the solution based on your all requirements:

$(document).ready(function () {
  $(".contentBox").css("display","none");

  //click event
  $("h2").click(function () {
      $(this).next(".contentBox").slideToggle(3000);
  });

  //hover effect
  $(".contentBox").hover(
    function () {
      $(this).addClass("textHovered");
    },
    function () {
      $(this).removeClass("textHovered");
    }
  );
});

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;
}
.textHovered {
    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 class="panelContainer">
    <h2 id="h21">Do I need a website?</h2>
    <p class="contentBox">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 class="panelContainer">
    <h2>What is SEO?</h2>
    <p class="contentBox">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 class="panelContainer">
    <h2>What is a content management system?</h2>
    <p class="contentBox">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 class="panelContainer">
    <h2>Do I need a blog?</h2>
    <p class="contentBox">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>

- Vishwa
- April 13, 2022 at 4:05 am
- 0 votes
0
You can initially keep make paragraph hide by Hide() function in jquery and then by clicking on each heading use slidetoggle function for paragraph and use Next() to show paragraph of clicked heading.
to change background and font color, jusr use hover function and in that make background to font-color and vice versa.

Login or Signup to reply.

- Hitesh
- April 13, 2022 at 7:27 am
- 0 votes
0
For better interactivity if you wanted one paragraph to hide on click of another paragraph you can apply a slideUp to every paragraph and then open the required div.
```
    $('h2').click(function () {
        $('.contentBox').slideUp(3000);
        $(this).next('.contentBox').slideDown(3000);

    });
```
Login or Signup to reply.

Not sure what is your error. I find an error when I Run code snippet:

Error: {
  "message": "Uncaught ReferenceError: jQuery is not defined",
  "filename": "https://stacksnippets.net/js",
  "lineno": 117,
  "colno": 9
}

If that is your issue, you can check the jquery files in your local or use:

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

To meet your request, you can try

jQuery(document).ready(function () { 
    $(".contentBox").hide();

    $("h2").click(function(){
        $(this).next(".contentBox").fadeToggle(3000);
    });

    $("p").hover(
        function(){
            $('p').css('background', '#FFE5C3');
            $('p').css('color', '#524737');
        },
        function(){
            $('p').css('background', '#FFE5C3');
            $('p').css('color', '#524737');
        }
    );
});

Please signup or login to give your own answer.

Click here to cancel reply.

I want to meet the following conditions by jquery but I am getting error somehow – SEO

Answers