I have created a custom form in a module via Form API. The form sits in a page created by hook_menu, which calls a function that renders the form from a form builder function. Also included in my module is a form submit function.

Currently, my form is divided into field sets that can be collapsed and expanded. It would be a lot nicer if the field sets were in tabs. To acheive this I intend to use jQuery UI tabs with the following code snippet:

drupal_add_library('system', 'ui.tabs');
(function($) {
    $(function() {
        $( "#tabs" ).tabs();
', 'inline');

I know I can put the other required markup in #prefix and #suffix properties in the $form array to wrap the field sets in tabs - but where does the above code go in the module? Should I be using hook_node_view or hook_view or something to ensure that jQuery UI tabs are initialised on my form page?


  • you can use hook_init()
    – Aboodred1
    Apr 3, 2013 at 23:22

1 Answer 1


If you're adding javascript for a specific form, use



$form['#attached']['library'][] = array('system', 'ui.tabs');
$form['#attached']['js'] = array(
  drupal_get_path('module', 'mymodule') . '/my_module_init.js',

You might also be interested in field_group, which provides jquery tabs etc.. for entity forms

  • Instead of the second part, can I do this: $form['#attached']['js'] = array( drupal_add_js('(function($) { $(function() { $( "#tabs" ).tabs(); }); })(jQuery);', 'inline') ); ???
    – dbj44
    Apr 4, 2013 at 11:43

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.