• Payment Plugins Poll

    We need your feedback on the need for updated payment plugins. Please go here and give us your feedback.

  • Joomla 5.1

    For running J!5.1 you must install Fabrik 4.1
    See also Announcements

  • Subscription and download (Fabrik 4.1 for J!4.2+ and J!5.1) are working now

    See Announcement
    Please post subscription questions and issues here

    We have resolved the issue with the J! updater and this will be fixed in the next release.

Accordion Form Groups

  • Views Views: 10,404
  • Last updated Last updated:

Navigation

         Form Article Plugin Tutorial
      Autofill form plugin
      Clone form plugin
      Comment form plugin
      Email form plugin
      EXIF form plugin
      FTP form plugin
      J2store form plugin
      Kunena form plugin
      Limit form plugin
      Logs form plugin
      Mailchimp form plugin
      Paginate form plugin
      Paypal form plugin
      PHP form plugin
      Pingdotfm form plugin
      Receipt form plugin
      Redirect form plugin
      REST form plugin
      Slack form plugin (+)
      SMS form plugin
      Twitter form plugin
      Upsert form plugin
      VBforum form plugin
      Create a Search Form
      Accordion Form Groups
  • Accordion Groups are a standard way of displaying lengthy Forms in Joomla. Forms will show only one Group of Elements at a time, closing the existing open Group when you open a different Group.

    Fabrik 3.0 :
    Presuming your form has an id of 1 then create a 1.js file in components/com_fabrik/js and enter the following Javascript into the file:
    window.addEvent('domready', function() {
    var handles = document.getElements('legend');
    var Elements = document.getElements('fieldset > ul, fieldset > .fabrikSubGroup');
    var myAccordion = new Fx.Accordion(handles , Elements);
    });
    Each group heading when clicked on will hide the other Groups content and show its own - see Mootools Accordion documentation.

    You may need to tweak your form template to ensure a minimum height for each fieldset:
    CSS:
    fieldset {
    min-height:21px;
    }
Back
Top