It's not immediately obvious how to go about inserting jQuery into a Drupal node, but it is straightforward once you know how. Below are the steps for incorporating the slide effect into your content.
This article assumes familiarity with editing Drupal nodes and input formats of same, a rudimentary knowledge of what jQuery is, and of course some PHP and XML.
First of all ensure that your node's input format is set to PHP.
Enter the following PHP code anywhere in the node
drupal_add_js(
'$(document).ready(function(){
$("#click1").click(function() {
$("#detail1").slideToggle("normal");
});
});',
'inline'
);
The jQuery.com site is well documented, so you can get all of the details on the necessary syntax there, but in a nutshell the above function is telling Drupal the following:- once the page is ready i.e. loaded
- whenever the div with id click1 is clicked,
- perform the slideToggle function on the div whose id is detail1
With the following XML code also placed in your node, the detail1 div is initially hidden with the inline style display:none
<div id="click1"> <b>Click here to see the scrolling effect</b> </div> <div id="detail1" style="display:none"> This text will scroll into and out of visibility<br /> when the above bold text is clicked </div>The result is as follows:
Click here to see the scrolling effect
A quick browse through the events and effects over on the jQuery.com documentation should convince anyone of jQuery's potential.
Note: There appears to be a bug in TinyMCE for Drupal6 that removes your initial PHP code, so I've found it best to disable TinyMCE when creating these nodes. This is not true for Drupal5.
Excellent ...
... just what I needed, thanks.