Implement javascript in drupal node

Question

In my drupal config I have created a video page, which I'm using to create video titles. I also created a course page, which will be displaying all the video titles available in that course using views and node reference combination. It only displays video title list.

Now, Take a look here http://www.lynda.com/home/DisplayCourse.aspx?lpk2=65713

You see the video titles are arranged in a chapter - wise manner, using javascript to hide/show chapter title.

I want to implement a similar functionality in my drupal site. If it is not possible with views thats ok, but I need a way to implement the javascript and chapter title in the course page. I want to keep the layout same as much as possible.

Even if I have to manually enter/edit the code in the body, I don't care as long as I have the functionality.

Answer 1

If you have implemented the markup, the javascript effect will be pretty easy to make.

You just need to apply a click handler on the chapters and hide/show the content. jQuery that is included in Drupal makes this quite simple and easy.

For the markup, it will probably be easier to do in a custom module, since you need a very specific ordering, and need some specific info on the chapter as well as the pages.

Update:
You should consider using node relationships, and use two content types. Especially if you want more info for each chapter like a image, teaser text etc.

Answer 2

If you don't want to write the jQuery and are satisfied with the "accordion" effect see http://drupal.org/project/views_accordion

A demo of views accordion can be found on http://manueg.okkernoot.net/ (See "latest thoughts" in the main content area). This is integrated with views so all you need do is to make the correct video title the accordion title.

You can probably theme the accordion too to get the desired user interface.