jQuery file not working

Question

I am trying to build an Accordion but for some reason my jQuery file is not getting picked up. if someone can please help me out I would really appreciate it. This is what I have for my

HTML

$(document).ready(function() {
  $('.list').on('click', '.list-control', function(e) {
    e.preventDefault();
    $(this).next('list-content').not(':animated').slideToggle();
  });
});

<!DOCTYPE HTML>
<html>

<head>
  <meta charset="UTF-8">
  <title> Clever Oscar </title>
  <link rel="stylesheet" src="main.css">
</head>
<!--start of body-->

<body>
  <h1>Clever Oscar</h1>
  <ul class="list">
    <li>
      <button class="list-control">
     Phase one
    </button>
      <div class="list-content">
        Panal Context
      </div>
    </li>
  </ul>


  <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
  <script src="script.js"></script>
</body>

</html>

change `$(this).next('list-content')` to `$(this).next('.list-content')` and try — Aravind S, Jun 26 '18 at 04:05
I tried that, and now I am getting "Uncaught Error: Syntax error, unrecognized expression: unsupported pseudo: animated" — Oscar Pacheco, Jun 26 '18 at 04:07
what are you to trying to achieve?.because `$(this).next('.list-content').hide()` will hide the content...what are you trying to do with slideToggle? — Aravind S, Jun 26 '18 at 04:11
I figured it out, thanks to the fella at the bottom, I was using the slim version of jQuery — Oscar Pacheco, Jun 26 '18 at 04:23

4b0 · Accepted Answer · 2018-06-26T11:49:57.290

In the jquery.slim.js animation effects like:

jQuery.easing, jQuery.Animation, jQuery.speed

are removed so use normal jquery. Also you miss . for class.

$(document).ready(function() {
  $('.list').on('click', '.list-control', function(e) {
    e.preventDefault();
    $(this).next('.list-content').not(':animated').slideToggle();
  });
});

<!DOCTYPE HTML>
<html>

<head>
  <meta charset="UTF-8">
  <title> Clever Oscar </title>
  <link rel="stylesheet" src="main.css">
</head>
<!--start of body-->

<body>
  <h1>Clever Oscar</h1>
  <ul class="list">
    <li>
      <button class="list-control">
     Phase one
    </button>
      <div class="list-content">
        Panal Context
      </div>
    </li>
  </ul>


  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
  <script src="script.js"></script>
</body>

</html>

Also see this old so question. What are the differences between normal and slim package of jquery?

This was it! THANK YOU! That was actually a huge help – Oscar Pacheco Jun 26 '18 at 04:24 — Oscar Pacheco, Jun 26 '18 at 04:24

Mr. Roshan · Answer 2 · 2018-06-26T04:18:08.267

Try this: as you are missing $(this).next('list-content') here change it to $(this).next('.list-content').

Next thing you just use plain jquery library to achive this.

You may also achieve this by using .hide() and .show() functions.

    $(document).ready(function(){
     $('.list').on('click','.list-control', function(e){
      e.preventDefault();
      $(this).next('.list-content').not(':animated').slideToggle() 
            // you may also able to use hide() and show()
     });
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE HTML> 
    <html>
     <head>
            
      
      <meta charset="UTF-8">
      <title> Clever Oscar </title>
      <link rel="stylesheet" src="main.css">
     </head>
          <!--start of body-->
     <body>
      <h1>Clever Oscar</h1>
      <ul class="list">
       <li>
        <button class="list-control">
         Phase one
        </button>
        <div class="list-content">
         Panal Context
        </div>
       </li>
      </ul>
      
      
     </body>

      <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
      <script src="script.js"></script>
    </html>

jQuery file not working

2 Answers2