am trying to create a accordion like UI form for my SPO list newform.aspx by following the below URL : https://spjsblog.com/category/accordion/

but am unable to get anything working! has anyone tried with creation of accordion for their newform.aspx and editform.aspx in SPO list UI?

<script type="text/javascript" 
     <script type="text/javascript" 
  <script type="text/javascript">

   var accConstructor = {sections:[{name:’First section’,fields:
   [‘InMultipleSections’,’Column1′,’Column2′],mouseOver:’This is the first 
      {name:’Second section’,fields:
    This is the second 
     {name:’Third section’,fields:
     [‘InMultipleSections’,’Title’],mouseOver:’This is 
     the third section’,sectionStyle:”,clickFunction:”},
         {name:’Forth section’,fields:
    [‘Column5′,’Column6′,’MyPeoplePicker’],mouseOver:’This is the forth 
    fields’,mouseOver:’This section shows all 
    orphanFields:{show:true,name:’Orphans’,mouseOver:’All orphan 
  • The blog-post clearly states that this is for SP on-premise 2010 or 2007. – Christoffer Apr 3 '19 at 14:44
  • has anyone explored creating the accordion UI for SPO list, with single line of tetx, multline, dropdown, and people picker controls? any links ? – userAZLogicApps Apr 3 '19 at 14:56
  • You realize the code you pasted here is exactly the code from the blog post, which references file locations (src="/test/English/Javascript/... etc) and column names (Column1, Column2, MyMultiLookup, etc.) which are very likely not in your environment? – Dylan Cristy Apr 3 '19 at 20:14

We can use the HillbillyTemplate.js library and jQuery UI to achieve it.

The code like below.

<script type="text/javascript" src="//code.jquery.com/jquery-1.11.1.min.js"></script> 
<link type="text/css" rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.0/themes/start/jquery-ui.css" > 
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.0/jquery-ui.min.js"></script> 
<script type="text/javascript" src="../../SiteAssets/HillbillyTemplate.js"></script> 
<style type="text/css">  

<script type="text/javascript">
jQuery(document).ready(function($) {
    var tabsObj = [ 
        ["General", ["Title", "column1", "column2"]], 
        ["Admin", ["column3", "column4"]],
        ["Misce", ["column5", "column6"]]
        genericAlert: true,
        alertErrorText: "Form errors exist. Please fix form errors and try again"
function buildAccordion(tabsObj){
    for(var i=0;i<tabsObj.length;i++){
        var section=tabsObj[i][0];
        var columns=tabsObj[i][1];
        var accordionHTML="<h3>"+section+"</h3><div><p><table>";
        for(var j=0;j<columns.length;j++){
            accordionHTML+="<tr><td>"+columns[j]+":</td><td><span class='hillbillyForm' data-displayName='"+columns[j]+"'></span></td></tr>";
<span class="hillbillyFormSave"></span>
<span class="hillbillyFormCancel"></span>
<div id="accordion">   

Refer to: SharePoint Online List Accordion for my NewForm.aspx or EditForm.aspx

| improve this answer | |
  • i agree that, it can be created. am having few more reqmnts within the form, i wanna add 2 buttons within the sections and manipulate the list data of sections and send email. is it possible? adding a new button immediately below sections only for 5,6,7 sections ( i am having 7 sections for this splist) – userAZLogicApps Apr 4 '19 at 15:48

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.