Collapsing all or a few nominated Sections Collapsed

Using form rules, checkboxes and formula URL buttons it's possible to have buttons or checkboxes to show or hide sections.  But I have never heard of a way to expand / collapse a section other than by the native interface.

You can inject script into the form that would override the CSS. I've done this and had it setup as an "accordion", where only one section is open at a time, but it's a little clumsy.

Thanks. Could Ihave some help t set this up?

It's a 2-step process to set this up, but thankfully both are pretty easy.

Step 1 - Create a Code Page in your app called 'accordion.js' and insert the following code into that page:

$(function(){

$(".sectionDiv.expanded .sectionTitle").click();

$(".sectionTitle:eq(0)").trigger('click');

$(".sectionTitle").click(function(){

var $self = $(this);

$('.sectionTitle').each(function(){

if($(this).is($self))return true;

var $titleWrap = $(this).parent();

var $divWrap = $titleWrap.parent();

if($divWrap.hasClass('expanded')){

$divWrap.removeClass('expanded').addClass('collapsed');

$titleWrap.removeClass('expanded').addClass('collapsed');

$titleWrap.find('.ToggleSectionIcon').removeClass('SectionExpandedIcon').addClass('SectionCollapsedIcon');

$divWrap.find('.Divider').next().css('display','none');

}

});



});

});

Step 2 - Create a Formula Text field, select the "Allow HTML" checkbox, and insert the following formula:

"<img qbu=\"module\" src=\"/i/clear2x2.gif\" " & "onload=\"javascript:if(typeof QBU=='undefined'){QBU={};$.getScript('" & URLRoot() & "db/" & Dbid() & "?a=dbpage&pagename=accordion.js&rand='+Math.random())}\">"

Now, just put that field at the top of your form and it will implement the accordion for your users.

Thanks a lot Blake.  Other than the high level of your skill, this is quite straight forward.  I put in place. This seems all good but the last part where I have to place it in the form, not too sure if I got it right.  I placed it after the first section of the form.  But it appears only as a field. (I did allow HTML tags). What should I expect? A button that can be clicked or something else.  I named code as accordion in line with the formula.

Sorry, I did not name it as js file.  It is all,  It is an amazing piece of work.   I am very grateful. Would you be kind enough to get in touch with me on akhwaja....@woolworths.com.au (just remove the dots pl).  I may have a proposition for you.

One improvement that could be made is to leave top sections above where the field is placed to remain open to make it more useful. This way people can see some primary sections.  Secondly, if this remembers the settings of a record and applies to other records when scrolled.  Just an idea!

I tried this and it works.  I does leave the very top section open.  My question is does the top of the form have to have the accordion.js  sitting there in view?  How can I hide that word?

This works beautifully. One suggested improvement:

• At the top of the form, just below the image-onload field (your Step 2), insert a section header with the title of the section left blank.
• Within the untitled section, place a few fields that you want to be always-displayed, such as identifiers for the record or your default fields that show in all new reports.
• In all other sections, be sure you have a section title.

Quick Base automatically expands sections that have no title. Thus, your default or record-identifying fields always get displayed, and all other fields are shown or hidden by the user's choice to expand a section.