Accordion Form Groups

  • Views Views: 10,906
  • Last updated Last updated:

Navigation

Forms
   Form plugins
      Article form plugin [+]
         Form Article Plugin Tutorial
      Autofill form plugin
      Clone form plugin
      Comment form plugin
      Email form plugin
      EXIF form plugin
      FTP form plugin
      Javascript form plugin
      Joomla user form plugin
      Limit form plugin
      Log Form Plugin
      Logs form plugin
      Mailchimp form plugin
      Notification form plugin
      Paginate form plugin
      Paypal form plugin
      PHP form plugin
      Receipt form plugin
      Redirect form plugin
      REST form plugin
      SMS form plugin
      Upsert form plugin
   How do I ... Forms
      Create a link to your form
      Create a Search Form
      Create and activate Joomla users
      Set element defaults from URL
      Submit a form via a link
      Users editing own records
   How do I ... Forms Advanced
      Accordion Form Groups
      Form and Details templates
         Render a single element in a form
      Hide Element Validation Symbol
      Stop enter key submitting form

Wiki index

Page
  • 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:
    Javascript: 
    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