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.
Daniel Sipos
Danny founded WEBOMELETTE in 2012 as a passion project, mostly writing about Drupal problems he faced day to day, as well as about new technologies and things that he thought other developers would find useful. Now he now manages a team of developers and designers, delivering quality products that make businesses successful.
Comments
Thanks for the tutorial. Just
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
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.
Thanks
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,
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 :)
Thanks
Exactly what I'm looking for!
Thanks a lot for sharing!
In reply to Thanks by Sam (not verified)
No problem!
No problem!
Nice Vid thanks
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 :)
Thank You
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
Anchor Links
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
In reply to Anchor Links by Bindu (not verified)
Hey there.
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
In reply to Hey there. by admin
Hi Danny....Its actually
Hi Danny....Its actually possible by replacing the
In reply to Hi Danny....Its actually by Bindu (not verified)
Cool! Thanks for sharing!
Cool! Thanks for sharing!
In reply to Cool! Thanks for sharing! by admin
Hi Danny.....just encountered
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?
In reply to Hi Danny.....just encountered by Bindu (not verified)
Hi Danny...the anchor tags
Hi Danny...the anchor tags dint work with an updated version of Jquery. With Jquery 1.8 its works fine.
Blocks inside accordion ?
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
I think it's not possibly simply in the UI, but with some custom code you could manage it probably.
accordion question
@ 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
Where is the link of screencast?
In reply to Where is the link of by Walter (not verified)
Hey,
Hey,
I added the link. For some reason the embedded video doesn't show.
Thanks for letting me know.
D
accordion within Tabs
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
It doesn't work with programmatic hook_block_view_alter
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