I've searched all over the internet, Drupal forums, and even installed and uninstalled several modules without any success. Perhaps I'm not using the right search terms and I'm just missing a blatant feature or module that does what I'm looking for.

I have a content type that is using the accordion feature in the FieldGroup model. I would like users filling out this form to be able to click a "next" button located at the bottom of each accordion item that will close the focused item and open the next one. Otherwise, it's up to the user to know to click the accordion header to open the next box.

I'm not a developer, so I certainly can't do it, but I would request that the feature be possibly integrated in the future since it is a common-sense navigation item that makes usability that much better.

That being said, does anybody know of a solution to this problem? Is there a module I can install, code I have to integrate, etc? I'm at a loss because I simply can't find the topic anywhere online.

You can view the content type I'm talking about here: http://advertise.arlingtonvoice.com/?q=node/add/advertisement

Zack Maxwell


arlingtonvoicellc’s picture

Nobody at all has any idea how to do this simple task??

Hydra’s picture

Status: Active » Closed (works as designed)

This solution should work for you, of course you have to adjust the selector class

zuuperman’s picture

Status: Closed (works as designed) » Closed (won't fix)

This is a feature that won't be added to fieldgroup. We already have multipage for that.

The only way you can do this, is by writing custom javascript for it, that places the next buttons and adds click listeners on it.
The click listener needs to call the accordion function, together with it's id.

The accordion function is: $('div.field-group-accordion-wrapper').accordion("activate" , i); Where i is the index of the accordion that needs to be shown.

arlingtonvoicellc’s picture

Multipage only has a function to take you to a new (next) page altogether. I tried installing it and playing around to get it working on my accordion but couldn't.

In regards to your custom javascript suggestion, would I be able to drop this javascript into a field? Where exactly would I place the code so that it shows at the bottom of each accordion item? I tried dropping into a text field with "full HTML" set; however, it just displays the code snip rather than rendering it as javascript.

Any ideas?

brockfanning’s picture

Here's a lazy way to do something like this. The following assumes the field_group accordion items are named "group_accordion_1", "group_accordion_2", etc. It really should be done with loops, but I'm strapped for time and just thought this might give someone a head-start. If anyone would like a more robust "loopy" version, I'll be happy to swing back around and provide that, when time permits.

(function ($) {
  $(document).ready(function() {
    // adjust these group declarations depending on the names of your accordion item field_groups
    var $group1 = $('.group-accordion-1');
    var $group2 = $('.group-accordion-2');
    var $group3 = $('.group-accordion-3');
    var $next1 = $('<a>Next</a>');
    var $next2 = $('<a>Next</a>');
    var $back2 = $('<a>Back</a>');
    var $back3 = $('<a>Back</a>');
    var $accordion = $('div.field-group-accordion-wrapper');
    $next1.click(function(){ $accordion.accordion("activate", 1);});
    $back2.click(function(){ $accordion.accordion("activate", 0);});
    $next2.click(function(){ $accordion.accordion("activate", 2);});
    $back3.click(function(){ $accordion.accordion("activate", 1);});