How to add Javascript in Drupal 7 with jQuery? I am trying to provide the option that users be able to put comment under each paragraph. So at the end of the article, I have something like this:

Comments for paragraph 1

  /* here I show the comment for paragraph 1 */


Comments for paragraph 2

  /* here I show the comment for paragraph 2 */


Comments for paragraph 3

  /* here I show the comment for paragraph 3 */


so  I have added the following to node.tpl.php:

    for($b=1;$b&lt;$number;$b++)
   {   
         echo "Commentsfor Paragraph $b:" ."&lt;br&gt;" . "&lt;br&gt;" ;  

        foreach($cid_numbers as $no)
          {    

             $e=($content['comments']['comments'][$no]['#comment']-&gt;paragraph_id);   
             if($e==$b)   
             print render($content['comments']['comments'][$no]);  

           }   
        }


and it works. But now I want to hide the comments and only when users clicks on a link like:  Comments for paragraph 1, then he be able to see the comments.

In order to do that I have added the following to node.tpl.php file:

 &lt;script type="text/javascript"&gt;
     (function($) {
        $(document).ready(function(){
           $(".toggler").click(function(){
            $(this).next().slideToggle("slow");
            return false;
          }).next().hide();
        });
    })(jQuery);
  &lt;/script&gt;


and also changed the first code to this:

    for($b=1;$b&lt;$number;$b++)
   {  ?&gt;  
  &lt;p class="toggler" style="cursor:pointer;"&gt;&lt;?php echo "Commentsfor Paragraph $b:" ."&lt;br&gt;" . "&lt;br&gt;" ; ?&gt; &lt;/p&gt; &lt;div&gt; 
 &lt;?php
   foreach($cid_numbers as $no)
    {    

  $e=($content['comments']['comments'][$no]['#comment']-&gt;paragraph_id);   
   if($e==$b)   
    print render($content['comments']['comments'][$no]);  

   }   ?&gt; &lt;/div&gt; &lt;?php   

   }


This is the website that gave me the idea that how to do the hide/show: http://renaudjoubert.com/en/article/how-add-javascript-drupal-7-jquery?utm_source=twitterfeed

But the output looks like this:

comments for paragraph 1

 here it show comments for paragraph 3


comments for paragraph 4

and then when I click on the link "comments for paragraph 1" then  it displays the comments for paragraph 1 and also the link " comments for paragraph 2".
So what is my mistake? Have I put  tag in the right place? Or do you have any suggestion that how can I hide comments and show them when click on the link?
I may be wrong but I would remove your inner foreach and just use your $b variable instead of $no.

Alternatively here is another way to do it:

http://jqueryui.com/accordion/