0

I am trying learn to make a simple quiz.So I got a script in StackOverflow.It works here http://jsfiddle.net/Zy4gW/ ,but not when I use it ,here is my code

<html>
<head>
<title>Learning how to make a quiz</title>
<script type="text/javascript">

$(function(){

$('#q-and-a li a').each(function(){
  $(this).click(function(){
      $(this).siblings('div').slideToggle(300);            
  });        
});                

});
</script>
</head>

<body>

<ul id="q-and-a">
    <li><a>Question One</a>
    <div>Answer to Question One...</div>
  </li>
     <li><a>Question Two</a>
     <div>Answer to Question Two...</div>
  </li>
</ul>

<style>
    ul { margin: 0; padding: 0; }
    ul li { margin: 0; padding: 0; list-style: none; }
    ul li a { color: blue; }
    ul li div { display: none; }
</style>


</body>
</html>

Why doesn`t it run?

1
  • 1
    You forgot to call jquery library.
    – Alex
    Commented Oct 15, 2015 at 6:20

4 Answers 4

3
<!DOCTYPE html>

<html>
<head>
<title>Learning how to make a quiz</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>                                    //You had not imported this library which is required for running jQuery
<script type="text/javascript">

$(document).ready((function(){                
  $('#q-and-a li a').click(function(e){           
    $(this).next('div').slideToggle(300);        //div is child of li not a sibling         
  });       
}));      
</script>
</head>

<body>

<ul id="q-and-a">
    <li><a >Question One</a>
    <div>Answer to Question One...</div>
  </li>
     <li><a >Question Two</a>
     <div>Answer to Question Two...</div>
  </li>
</ul>

<style>
    ul { margin: 0; padding: 0; }
    ul li { margin: 0; padding: 0; list-style: none; }
    ul li a { color: blue; }
    ul li div { display: none; }
</style>


</body>
</html>

Your mistakes were as follows: 1) You had not imported the library required for jQuery 2) The function you were using to access the div element Actually div is a child element of li. You were accessing it as sibling of li.
3) No need of .each function to access li separately

0
3

Put this on top of your script [below the title tag]

Jquery library

<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
2
  • this too does'nt work <html> <head> <title>Learning how to make a quiz</title> <script src="//code.jquery.com/jquery-1.11.3.min.js"> $(function(){ $('#q-and-a li a').each(function(){ $(this).click(function(){ $(this).siblings('div').slideToggle(300); }); }); }); </script> </head> <body> <style></style> </body> Commented Oct 15, 2015 at 6:25
  • If you are double clicking and opening the html file in a document. this won't work. You have to use WAMP or host your code somewhere. Let me update my answer with an alternative solution. Check my answer now. With and update from @alireza Commented Oct 15, 2015 at 6:29
1

You are using jQuery, but i can't see where you are loading the ressource. Have a look at hosted libraries

2
0

You definitely want to make sure your resources are loaded properly, as noted here by others. Check your browser's dev tools to see if resources are loaded, and check the console to see if there are any errors.

I would also suggest adding a doctype to your file (at the very top, before the opening <html> tag:

<!DOCTYPE html>

The missing doctype might not be causing your issue - but then again, I've seen stranger things happen. Not to mention, it's best practice to always include this.

2
  • @piyushashtikar Regardless - you should always have a doctype declared. Have you tried checking out the dev tools to see if jQuery is loading properly? Hit F12 on your keyboard or right-click -> inspect element. Go to the link in the HTML where you're loading jQuery and click on it - it should open up the jQuery resource. If nothing appears, then that resource is not loading properly. Also, check the Console tab and see if it is reporting any javascript errors. Commented Oct 15, 2015 at 6:53
  • @piyushashtikar Make sure that you are not only loading jQuery, but also have the rest of your javascript inside of a script tag: <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script> <script type="text/javascript"> $(function(){ $('#q-and-a li a').each(function(){ $(this).click(function(){ $(this).siblings('div').slideToggle(300); }); }); }); </script> Commented Oct 15, 2015 at 6:54

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.