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
– Aravind S, Commented Jun 26, 2018 at 4:05
I tried that, and now I am getting "Uncaught Error: Syntax error, unrecognized expression: unsupported pseudo: animated" — Oscar Pacheco
– Oscar Pacheco, Commented Jun 26, 2018 at 4: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
– Aravind S, Commented Jun 26, 2018 at 4:11
I figured it out, thanks to the fella at the bottom, I was using the slim version of jQuery — Oscar Pacheco
– Oscar Pacheco, Commented Jun 26, 2018 at 4:23

4b0 · Accepted Answer · 2018-06-26 11:49:57Z

1

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?

edited Jun 26, 2018 at 11:49

answered Jun 26, 2018 at 4:10

4b0

22.4k30 gold badges97 silver badges143 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Oscar Pacheco Over a year ago

This was it! THANK YOU! That was actually a huge help

Mr. Roshan · Accepted Answer · 2018-06-26 04:18:08Z

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>

Collectives™ on Stack Overflow

jQuery file not working

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related