Vertical Tabs: link to, open, and scroll to a specific tab


To create an "Edit" link that will open a node edit page, open a specific Vertical Tab, and scroll down to it.

This turned out to be trickier than expected!

What you'll need:

The steps to take

  1. Download, patch, and enable Vertical Tabs.
  2. Create a custom module, hereafter known as yourModule. If you don't know how, start here.
  3. In your module folder, add an empty JS file.
  4. In yourModule.module, add the following code: <?php drupal_add_js(drupal_get_path('module', 'yourModule') . '/js/script.js'); drupal_add_js( array('yourModule' => array('nid' => arg(1))), 'setting'); ?>
  5. This accomplishes two things: it specifies that your JS file should be loaded when a drupal page is loaded, and it adds a new jQuery object containing the node id of the current node (when one is being viewed).

    *The second line is optional, depending on whether you'd like to use jQuery to generate the edit links.

  6. Crack open that empty JS file and paste in there: Drupal.behaviors.yourModule = function(context) {

    /* if this is an edit page and fragment was specified, scroll to vertical tabs /
    var url = location.pathname; if (url.indexOf('/edit') && window.location.hash.length > 0) { /
    this waits until all of the other jQuery has loaded, e.g., vertical tabs */
    $(window).load(function(){ $('html, body', context).animate({ scrollTop: $('.vertical-tabs').offset().top }); $('.vertical-tab-button a[href="' + window.location.hash + '"]', context).click(); }); } }

    This script will check to see if you're on a node edit page and if you've specified a fragment in your URL. If so, it will scroll you down to the Vertical Tabs and click on the correct tab for you.

  7. Now create a few edit links. They should follow this format: Edit

    This particular link will open the Taxonomy tab. Replace "taxonomy" with the .vertical-tab-button a's href value (leave out the hash) to open whatever tab you like!

  8. OPTIONAL: I used jQuery to inject my edit links into the desired places. The following script will help you do that. Just populate the two arrays with 1) the CSS container that you'd like to inject your link into, and 2) the corresponding vertical tab. /* container css selector => vertical tabs fieldgroup */ var editButtonSelector = new Array(); editButtonSelector[0] = '.pane-field-description'; editButtonSelector[1] = '.pane-taxonomy'; editButtonSelector[2] = '#contact-name';

    var editButtonFragment = new Array(); editButtonFragment[0] = 'group_company_description'; editButtonFragment[1] = 'taxonomy'; editButtonFragment[2] = 'group_contact';

    /* loop through array and build edit links */ $.each(editButtonSelector, function(key, value) { $(value + ':not(.yourModule-vtlinks-processed)').addClass('yourModule-vtlinks-processed').append('Edit'); });

Feel free to comment if you'd like me to clear any of that up.

Add new comment

Plain text

  • No HTML tags allowed.
  • Lines and paragraphs break automatically.