Drupal 7 and jQuery UI (Accordion)

Now that jQuery UI is included in D7 core, we'll see a lot more application style functions using the UI library. Here's a quick example for adding an accordion to node content (enable and select PHP filter) demonstrating how easy it is to add jQuery UI effects and widgets in Drupal 7.

<?php
drupal_add_library('system', 'ui.accordion');
drupal_add_js('jQuery(document).ready(function(){jQuery("#accordion").accordion();});', 'inline');
?>
<div id="accordion">
<h3><a href="#">Section 1</a></h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>

<h3><a href="#">Section 2</a></h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>

<h3><a href="#">Section 3</a></h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>

Sorry no demo, I'll put it up after upgrading to d7.

Submitted by Chris Herberte on Mon, 2010-05-31 10:38

Posted in

13 Comments Posted

Many thanks for posting this

Many thanks for posting this update. I followed your advice about updating page.tpl.php, it works a treat :)
I am new to drupal so put the example within the div id = "content" section. Does it matter where I added the accordion code in this page?

Happy to read more on this if you can point me in the right direction.

Many thanks,

monkeyx

Submitted by monkeyx on Tue, 2011-02-08 06:51.

thanks a lot! This is what I

thanks a lot! This is what I am looking for!

Submitted by Anonymous on Fri, 2011-02-18 20:17.

not working

Submitted by Anonymous on Thu, 2011-03-10 07:10.

enable and select PHP filter?

Submitted by Anonymous on Wed, 2011-09-28 08:37.

thanks a lot. I spent entire

thanks a lot. I spent entire day to figure out how JqueryUI works in drupal07. Thanks once again for such a simple explanation

Submitted by Anonymous on Fri, 2011-03-18 01:09.

Thanks for posting this. It

Thanks for posting this. It came in useful. I was able to get the jQuery UI tabs working very easily after seeing this. I'd put in a lot of time in trying to get it to work before I found your post.

Submitted by Susheel Chandradhas on Fri, 2011-03-18 20:50.

This was very helpful. I just

This was very helpful. I just put this in the body using php filter, and voila it works.
Thanks,
Perry.

Submitted by Anonymous on Wed, 2011-07-13 16:57.

Thank you very muc for this

Thank you very muc for this post. This is exactly what I need in my current project. And it looks very cool :-).

Submitted by Stefan on Wed, 2011-09-14 17:26.

Thanks. This is very useful.

Thanks. This is very useful. However, the issue I have run into is that the accordion content when it appears in Drupal is against a white background - the Drupal theme is ignored altogether. (I use Artisteer to generate the theme)

Submitted by Anonymous on Tue, 2011-10-04 23:00.

This was great - thanks! Is

This was great - thanks!

Is there a way for the jquery to be applied site-wide, so that every layer with a #accordion (.accordion, if you decide to change it) would turn into accordion text, without the added php markup?

Submitted by John on Thu, 2011-10-13 02:06.