Multiple DIV slides using Jquery

Multiple DIV slides using Jquery

Hello,

Im very new in Jquery and I was wondering if somebody can help me.

I got from the next link a DIV slide what I wanna use:

Only, not next to eachother but above eachother

1. Question
Answer
2. Question
Answer
----------->
14. Question
Answer

The next I have:

  2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml">
  4. <head>
  5. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  6. <title>Untitled Document</title>
  7. <style type="text/css">
  8. .targetDiv {
  9.     display: none
  10. }
  11. </style>
  12. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
  13. <script type="text/javascript" language="javascript">
  14. jQuery(function () {
  15.     jQuery('.showSingle').click(function () {
  16.         var index = $(this).parent().index(),
  17.             newTarget = jQuery('.targetDiv').eq(index);
  18.         jQuery('.targetDiv').not(newTarget).slideUp('fast')
  19.         newTarget.delay('fast').slideToggle('fast')
  20.         return false;
  21.     })
  22. });
  23. </script> 



  27. </head>

  29. <body>
  30. <!--put each <a> inside a div-->
  31. <div id="one"><a href="#" class="showSingle" target="1">Div 1</a>
  32. <div id="div1" class="targetDiv">Lorum Ipsum1</div>
  33. </div>

  35. <div id="two"><a class="showSingle" target="2">Div 2</a>
  36. <div id="div2" class="targetDiv">Lorum Ipsum2</div>
  37. </div>

  39. <div id="three"><a class="showSingle" target="3">Div 3</a>
  40. <div id="div3" class="targetDiv">Lorum Ipsum3</div>
  41. </div>

  43. <div id="four"><a class="showSingle" target="4">Div 4</a>
  44. <div id="div4" class="targetDiv">Lorum Ipsum4</div>
  45. </div>
  46. </td>


  49. </body>
  50. </html>
But when I put some <p> above my first DIV He wont show the first DIV but he will show the 2nd DIV.

How is that possible? And what am I doing wrong?

  2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml">
  4. <head>
  5. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  6. <title>Untitled Document</title>
  7. <style type="text/css">
  8. .targetDiv {
  9.     display: none
  10. }
  11. </style>
  12. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
  13. <script type="text/javascript" language="javascript">
  14. jQuery(function () {
  15.     jQuery('.showSingle').click(function () {
  16.         var index = $(this).parent().index(),
  17.             newTarget = jQuery('.targetDiv').eq(index);
  18.         jQuery('.targetDiv').not(newTarget).slideUp('fast')
  19.         newTarget.delay('fast').slideToggle('fast')
  20.         return false;
  21.     })
  22. });
  23. </script> 



  27. </head>

  29. <body>
  30. <p>
  31. <p>
  32. <p>
  33. <p>
  34. <!--put each <a> inside a div-->
  35. <div id="one"><a href="#" class="showSingle" target="1">Div 1</a>
  36. <div id="div1" class="targetDiv">Lorum Ipsum1</div>
  37. </div>

  39. <div id="two"><a class="showSingle" target="2">Div 2</a>
  40. <div id="div2" class="targetDiv">Lorum Ipsum2</div>
  41. </div>

  43. <div id="three"><a class="showSingle" target="3">Div 3</a>
  44. <div id="div3" class="targetDiv">Lorum Ipsum3</div>
  45. </div>

  47. <div id="four"><a class="showSingle" target="4">Div 4</a>
  48. <div id="div4" class="targetDiv">Lorum Ipsum4</div>
  49. </div>
  50. </td>


  53. </body>
  54. </html>
Now it wont show anything.....

Kind regards,
Steven.