Need some help with your project? Contact me

How to create your own jQuery UI accordions and tabs in Drupal 7

In this screencast I will show you how easy it is to get the jQuery UI accordion and tabs functionality on your own Drupal 7 site. All you need to do is install a couple of modules and you are good to go. No need for adding any custom jQuery into your theme or module, it is as simple as installing 2 modules.

The modules we are talking about here are jQuery UI Filter and jQuery Plugins. The role of the first one is to convert static HTML into the needed jQuery UI accordion and tabs. The latter offers an API for various jQuery plugins to integrate with Drupal modules and themes.

So watch the screencast and drop a comment if you have any questions.

Comments

Thanks for the tutorial. Just curious what the advantage would be to using this over Views with the Views Accordian module?

Well, I would say the two are used quite differently. Whereas Views generates these accordions dynamically using nodes, with the jQuery UI Filter you can create accordions and tabs wherever you want with whatever static content you may like..say in the middle of an article node.

Thanks for the comment.

Hi Danny,

Thanks for posting the video. Certainly helped me to resolve one of the feature requires on our website. Just had one question, Is there any way to change the style of the accordian menu like font, BG colour, colour etc

Any advise will be highly appriciated

Hey there,

Yes there is but you'll have to get in css for that. Just check out the markup of the accordion, and style it accordingly with css :)

Exactly what I'm looking for!

Thanks a lot for sharing!

No problem!

Useful and easy to configure little module - thanks for pointing it out. One of the worst things about Drupal (and there are only a few) is being able to find cool new modules like this easily so much appreciate you doing the work for me :)

Thanks for the Video. It was easy to install the module and get the tabs and Accordion to work for the site.
I encountered one problem, after installing the module I am not able add new contents. Anybody having this issue?

Thanks
Bindu

Hi Danny....how do we add anchor tags to these tabs so that when a user clicks on a link with the anchor tag, the tab opens automatically.

Thanks
Bindu

Hey there.

I am not a jQuery UI expert but from the documentation I did not see it's possible. I could very well be wrong though...

D

Hi Danny....Its actually possible by replacing the

<

h2 id="tabs-section-i"> with

<

h2 id="name">

Cool! Thanks for sharing!

Hi Danny.....just encountered some issues with the anchor tags in accordions. Works well with the Tabs. I am not sure if it was a Jquery update that caused the issue. Would you know?

Hi Danny...the anchor tags dint work with an updated version of Jquery. With Jquery 1.8 its works fine.

Nice video. In the example the content of the headers is text but is it possible that the content could be the content of blocks for example Section I contains block-24, Section II contains block-25 etc?

Thanks...

I think it's not possibly simply in the UI, but with some custom code you could manage it probably.

@ Danny ok I can do it with using php to print the block. Anyway on a different subject I asked an accordion question here so please let me know if you have any ideas. Thanks...

Where is the link of screencast?

Hey,

I added the link. For some reason the embedded video doesn't show.
Thanks for letting me know.

D

Hey,
I would like to know if its possible to place accordions inside tabs using this module and if so how would you do this.
Thanks

Your tutorial is nice, but when trying to recreate the effect with a customized text injected programmaticaly into a block, I was unable to make it work. Maybe it has to do with the fact that only nodes will have the Text Styles properties.

You can search in Drupal Answers for this post, which explains in detail the problem:
jquery-ui-filter-full-html-and-hook-block-view-view-name-alter

Add new comment

You must have Javascript enabled to use this form.