Vertical Tabs Next/Previous

subscribe. looking for exactly this

Attached is the js file I've been using to accomplish this. It needs a little more work to add a setting to activate this and to be rolled as a patch.

Thanks so much for this code, Jody Lynn -- it's exactly what I needed!

I am also looking to implement a Next/Previous feature for my forms.

Can you provide any additional help on how to implement your javascript - it would be very much appreciated.

subscribe

subscribe

Would be ideal to have this at the top & the bottom of each tab (instead of just the bottom)

IMHO it would be best to put the buttons next to the SAVE / PREVIEW / DELETE buttons on the node edit form

#2 Thanks Jody. It works well. I have very long forms and would like the user to be able to auto scroll to the top after selecting NEXT or PREVIOUS.

I added

$('html,body').animate({scrollTop: (0)}, 500);

to your code, and added the whole lot to the end of the vertical_tabs.js file.

Find attached the modified version.

Still hoping for some explanation/help on how to actually implement Jody Lynn's .js code!

Thanks a ton for this script, it works like charm.

I'm sure you have moved on. But I'm replying for those that find this page later like I did.

To implement this I just added the javascript to the end of the vertical_tabs.js file found in the vertical_tabs module directory.

@zeryn: You never want to hack a module. It breaks your upgrade path.

@zeryn, @torgormack:
Rename the file as a .js file (remove the .txt extension).
Place it in your theme's directory.
Add to the top of your theme's template.php:

drupal_add_js(drupal_get_path('theme', 'your_theme') . '/vertical-steps.js');

Replace your_theme with the name of your theme (machine name like the name of its directory, not the human readable name)

I wanted the previous and next button to live with the save, preview, delete buttons so here's what I came up with if anyone else is interested. I used some of the ground work already laid down in this post so credit where it's do.

In a custom module I altered the form of the node edit I wanted this feature on.
Replace "YOUR_MODULE" and "FORM_ID" with the name of your module and the id of the form to add the buttons to.

/**
 * Implementation of hook_form_alter().
 */
function YOUR_MODULE_form_alter(&$form, $form_state, $form_id) {
  if ($form_id == 'FORM_ID') {
    $form['buttons']['next'] = array (
      '#type' => 'submit',
      '#value' => t('Next'),
      '#weight' => 10,
    );
    $form['buttons']['prev'] = array (
      '#type' => 'submit',
      '#value' => t('Previous'),
      '#weight' => 9,
    );
    drupal_add_js(drupal_get_path('module', 'YOUR_MODULE') . '/vertical_steps.js');
  }
}

Created the following js file called vertical_steps.js in the new modules folder.

$(document).ready(function(){
  $("#edit-next").click(function(e) {
    e.preventDefault();
    $(".vertical-tabs-panes fieldset:visible").hide().next('fieldset').show();
    $(".vertical-tabs-list li.selected").removeClass('selected').next('li').addClass('selected');
    $('html,body').animate({scrollTop: (0)}, 500);
    if (!$(".vertical-tabs-panes fieldset:visible").next('fieldset').length) {
      $("#edit-next").hide();
    }
    if ($(".vertical-tabs-panes fieldset:visible").prev('fieldset').length) {
      $("#edit-prev").show();
    }
    return false;
  });
  $("#edit-prev").click(function(e) {
    e.preventDefault();
    $(".vertical-tabs-panes fieldset:visible").hide().prev('fieldset').show();
    $(".vertical-tabs-list li.selected").removeClass('selected').prev('li').addClass('selected');
    $('html,body').animate({scrollTop: (0)}, 500);
    if (!$(".vertical-tabs-panes fieldset:visible").prev('fieldset').length) {
      $("#edit-prev").hide();
    }
    if ($(".vertical-tabs-panes fieldset:visible").next('fieldset').length) {
      $("#edit-next").show();
    }
    return false;
  });
  $(".vertical-tab-button a").click(function() {
    if ($(".vertical-tabs-panes fieldset:visible").prev('fieldset').length) {
      $("#edit-prev").show();
    }
    else {
      $("#edit-prev").hide();
    }
    if ($(".vertical-tabs-panes fieldset:visible").next('fieldset').length) {
      $("#edit-next").show();
    }
    else {
      $("#edit-next").hide();
    }
  });
});

Handles everything I wanted so hopefully this helps someone else out.

#14 works almost perfectly in D7. But there is one bug. What happens if one or more ".vertical-tabs-panes fieldset" have another fieldsets in it? Then commands .hide().prev('fieldset').show() hides current active fieldset (main fieldset of wrapper) and sets "display:block" for last fieldset of previous ".vertical-tabs-panes fieldset" and wrapper stays hidden. So the activated tab appears as empty.

As I wrote in #14, there is problem if fieldset have fieldsets in it. Then show/hide procedure must be:
For Next button:
$(".field-group-tab:visible").hide().next().show();and for Previous button:
$(".field-group-tab:visible").hide().prev().show();
At last - all this works perfectly in D7! Thank you all for the script.

Sorry - status change wrong.

where to add #16 code?

amy_dany, my two rows should replace 4th and 17th rows:
$(".vertical-tabs-panes fieldset:visible").hide().next('fieldset').show();
$(".vertical-tabs-panes fieldset:visible").hide().prev('fieldset').show();
in the vertical_steps.js from #14

I added these lines at appropriate places, but click on next button moves to 8th vertical tab as I have 10 vertical tabs in my registration page and most of the fields are mandatory and every time I click on next button verifies all vertical tab fields for emptiness. why it is not working for me?