How to add Javascript in Drupal 7 with jQuery

I thought this would be an easy one. Not so. What works in Drupal 6 doesn't necessarrily work in Drupal 7.

Let's take a simple example. How about a script that allows you to show/hide one or more paragraphs. I did a quick Google search and found numerous examples. Here's the one I picked & slightly modified for the sake of clarity.

<script type="text/javascript">
    $(document).ready(function(){
      $(".toggler").click(function(){
        $(this).next().slideToggle("slow");
        return false;
      }).next().hide();
    });
</script>
    
<p class="toggler" style="cursor:pointer;">Show/Hide the following paragraph(s).</p>
<div>
    This paragraphe is initially hidden. Clicking on the link above will reveal (Show) all the content inside the DIV that immediately follows a "toggler" class paragraph.
</div>

In Drupal 6, simply paste this code in the Body field of a Page or Article node and it works. Well, as usual, there are a few requirements. For the most part, this should do it.

• Go to admin/settings/filters/2 (Full html settings) and uncheck the HTML filter.
• Set the Input format of the Body field to Full html.
• Disable rich-text
• Paste the above code, save and enjoy a moment of true happiness.

The Drupal 7 way

I tried this exact same method in Drupal 7 but by default the <script></script> tags and its content are removed (deleted) by the system for security reasons. There are probably ways to bypass this but it's bad practice.

So we can't embed this script in a Drupal 7 Article node. In the present case, the next best way - a proper way - is to embed the script directly into the Article template of the theme. In doing so, the script will be available for all nodes created with the Article content type. Now, that's even better. So how do we do this?

Click here to Show or Hide the next paragraph!

<script type="text/javascript">
    (function($) {
        // Javascript code
    }) (jQuery);
</script>

In the end, here's what the node--article.tpl.php should roughly look like.

 ...
 * @see template_preprocess()
 * @see template_preprocess_node()
 * @see template_process()
 */
?>

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


<div id="node-<?php print $node->nid; ?>" class="<?php print $classes; ?> clearfix"<?php print $attributes; ?>>
...

Ready for some magic?

• Create a new article.
• Make sure the Input format of the Body field is set to Full html.
• Disable rich-text.
• Paste the following code.

<style type="text/css">
  p.toggler:hover {
    color:#0071B3;
  }
</style>

<p class="toggler" style="cursor:pointer;">Show/Hide the following paragraph(s).</p>
<div>
    This paragraphe is initially hidden. Clicking on the link above will reveal (Show) all the content inside the DIV that immediately follows a "toggler" class paragraph.
</div>

Save and then Show/Hide to your heart's content!