Collapsing all or a few nominated Sections Collapsed
As I have a fairly long form, I would like to make it easier for users to look at the collapsed sections and then choose to expand the ones they want. Is there an option to achieve this?
Forum Discussion
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:
Step 1 - Create a Code Page in your app called 'accordion.js' and insert the following code into that page:
$(function(){Step 2 - Create a Formula Text field, select the "Allow HTML" checkbox, and insert the following formula:
$(".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');
}
});
});
});
"<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.