HTML and CSS are fine, but once I add Jquery, it does not have the toggle effect? how can I fix it?

user_13943363 0
Viewed 98

I just want to have the toggle to work: when I click on the "div", I hope that the div can toggle between "show-description", and since the "show-description" has a height and opacity setting, the div can appear and disappear. But currently, the jquery does not work, I cannot click the div(my cursor will not change from an arrow to a pointer that indicates it is clickable.)

I attached my code(HTML, css and js) in this thread as texts and images.They are three separate files as of right now.I am new to coding so I hope someone can help me.

$("div").on("click", function(){  
   $(this).toggleClass("show-description"); });
div {
height: 300px;
background-size: cover;
position: relative;
margin: 10px;}


p {
    color: rgba(255,255,255,1);
    background: rgba(0,0,0,1);
    background: -webkit-linear-gradient(bottom, rgba(0,0,0,1), rgba(0,0,0,.4));
    padding: 10px;
    background: -moz-linear-gradient(bottom, rgba(0,0,0,1), rgba(0,0,0,.4));
    padding: 10px;

    text-align: justify;
    line-height: 28px;
    border-radius: 0 0 12px 12px;
    position: absolute;
    bottom: 0;
    margin: 0;
    height: 30px;
}

small {
    opacity: 0;
}

.show-description p{
    height: 150px;
}

.show-description small{
    opacity: 1;
}

.price {
    float: right;
}


.first {
background: url("https://image.freepik.com/free-photo/flat-lay-bowls-with-powder_23-2148583721.jpg");
border-radius: 0 0 12px 12px;
}

.second {
background: url("https://image.freepik.com/free-photo/delicious-beef-burgers-wooden-board_23-2148290634.jpg");  
border-radius: 0 0 12px 12px;
}

.last {
background: url("https://image.freepik.com/free-photo/chocolate-cake-with-chocolate-sprinkles_144627-8998.jpg");
border-radius: 0 0 12px 12px;}
   <!DOCTYPE html>

<head>

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
 <link rel="stylesheet" href="cafe.css">
 <link href="http://fonts.googleapis.com/css2?family=Londrina+Shadow&display=swap" rel="stylesheet">
 <script src="cafeScript.js"></script>

</head>
<h1>Esha's restaurant</h1>

<div class="first ">

  <p>welsh onion soko <span class="price">$14</span><br />
<small>Mustard sierra leone bologi kale chard beet greens black-eyed pea sorrel amaranth garlic tigernut spring onion summer purslane asparagus lentil. </small></p>
</div>


<div class="second show-description">
  <p>pastrami boudin tongue <span class="price">$22</span><br />

<small>Tri-tip capicola kielbasa salami brisket chicken rump strip steak drumstick. Meatloaf chuck boudin ribeye pork jowl. Andouille bacon jowl meatloaf pork loin prosciutto bresaola.</small></p>
</div>

<div class="last">

  <p>fruitcake marzipan pudding dragee <span class="price">$8</span><br />
<small>Lollipop tart cotton candy jelly-o carrot cake apple pie cupcake. Jelly-o bear claw ice cream candy canes.</small></p>
</div>

<body>

css html jquery
2 Answers

Your code works perfectly fine. To change the cursor type so that users know it's clickable you will have to set cursor:pointer in related CSS style.
Snippet with cursor:pointer added to existing code:

$("div").on("click", function() {
  $(this).toggleClass("show-description");
});
div {
  height: 300px;
  background-size: cover;
  position: relative;
  margin: 10px;
  cursor: pointer;
}

p {
  color: rgba(255, 255, 255, 1);
  background: rgba(0, 0, 0, 1);
  background: -webkit-linear-gradient(bottom, rgba(0, 0, 0, 1), rgba(0, 0, 0, .4));
  padding: 10px;
  background: -moz-linear-gradient(bottom, rgba(0, 0, 0, 1), rgba(0, 0, 0, .4));
  padding: 10px;
  text-align: justify;
  line-height: 28px;
  border-radius: 0 0 12px 12px;
  position: absolute;
  bottom: 0;
  margin: 0;
  height: 30px;
}

small {
  opacity: 0;
}

.show-description p {
  height: 150px;
}

.show-description small {
  opacity: 1;
}

.price {
  float: right;
}

.first {
  background: url("https://image.freepik.com/free-photo/flat-lay-bowls-with-powder_23-2148583721.jpg");
  border-radius: 0 0 12px 12px;
}

.second {
  background: url("https://image.freepik.com/free-photo/delicious-beef-burgers-wooden-board_23-2148290634.jpg");
  border-radius: 0 0 12px 12px;
}

.last {
  background: url("https://image.freepik.com/free-photo/chocolate-cake-with-chocolate-sprinkles_144627-8998.jpg");
  border-radius: 0 0 12px 12px;
}

.div {
  cursor: pointer;
}
<!DOCTYPE html>

<html>

<head>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <link rel="stylesheet" href="cafe.css">
  <link href="http://fonts.googleapis.com/css2?family=Londrina+Shadow&display=swap" rel="stylesheet">
  <script src="cafeScript.js"></script>

</head>

<body>
  <h1>Esha's restaurant</h1>

  <div class="first ">

    <p>welsh onion soko <span class="price">$14</span><br/>
      <small>Mustard sierra leone bologi kale chard beet greens black-eyed pea sorrel amaranth garlic tigernut spring onion summer purslane asparagus lentil. </small></p>
  </div>


  <div class="second show-description">
    <p>pastrami boudin tongue <span class="price">$22</span><br/>

      <small>Tri-tip capicola kielbasa salami brisket chicken rump strip steak drumstick. Meatloaf chuck boudin ribeye pork jowl. Andouille bacon jowl meatloaf pork loin prosciutto bresaola.</small></p>
  </div>

  <div class="last">

    <p>fruitcake marzipan pudding dragee <span class="price">$8</span><br/>
      <small>Lollipop tart cotton candy jelly-o carrot cake apple pie cupcake. Jelly-o bear claw ice cream candy canes.</small></p>
  </div>


</body>

</html>

user_139346260

JQuery overkill here. You can do the same thing or something similar with vanilla javascript.

user_139498690
Related