Easy enough Accordion (Clickable collapsible views)

Implementing a CSS Accordion in Knack

This is what we are looking to achieve 

https://transformsquad.com/knack/Accordion.gif

 

i.e. For long forms it would be nice to be able to collapse/display certain views.

The goal is to make the rich text at the top a “CSS accordion” and then move the Invoice Request Details view “into the accordion”.

 

So start by adding a Rich Text View which will be the “container or target” for your collapsible view. Then build your form view as per normal in Knack builder.

 

There are only now 3 Steps - This is mainly cut and paste – the only modifications are to the JS in the last step.

 

  1. This is the JS and CSS contents for the Rich Text container (make sure you are in html mode when you paste) – yes both JS and CC are pasted into the rich text container (in html mode)

 

<script>

var acc = document.getElementsByClassName("accordionForm");

var i;

for (i = 0; i < acc.length; i++) {

  acc[i].addEventListener("click", function() {

    this.classList.toggle("activeForm");

    var panel = this.nextElementSibling;

    if (panel.style.maxHeight) {

      panel.style.maxHeight = null;

    } else {

      panel.style.maxHeight = panel.scrollHeight + "px";

    }

  });

}

</script>

 

<button class="accordionForm"> My Accordion Header which user will click on</button>

<div class="panelForm">

       <div id="CL-Collapse">

              <p>

              </p>

       </div>

</div>

 

 

NOTE: This  (<div id="CL-Collapse">) is the target we want to move the header view to.

 

  1. This goes in the main CSS Panel of Builder

 

/*** New Accordion Form collapsible views  **************   */

 

.accordionForm {

  cursor: pointer;

  font-family: Helvetica, Arial , sans-serif;

  font-weight: bold;

  letter-spacing: 3px;

  padding:10px;

  float:left;

  width:100%;

  border: 10px;

  text-align: center;

  outline: none;

  font-size: 2em;

  color: orange !important;

  transition: .4s;

}

 

.activeForm, .accordionForm:hover {

  background-color: rgb(248,249,248);

}

 

.accordionForm:after {

  font-family: FontAwesome;

  color: orange !important;

  font-weight: bold;

  float: right;

  content: "\f078";

  /*content: '\271A'; */

  margin-left: 5px;

}

 

.activeForm:after {

  content: "\f077";

}

 

.panelForm {

  color: orange !important;

  padding: 0 18px;

  background-color: white;

  max-height: 0;

  overflow: hidden;

  transition: max-height 0.6s ease-out;

}

Obviously change the CSS formatting to suit your own styling needs.

 The  content: "\f078";  and   content: "\f077";is a font awesome identifier for the icon at the far right. You can select whatever icon code you like here. https://fontawesome.com/cheatsheet

 

You should now have a collapsible working rich text panel in live view. These are usable for whatever contents you want. Sometimes I iframe contents into them. I find them useful for help text in my app so that they can be folded out of the way from experienced users.

 

  1. The final step is to get JS to move the view you want to be collapsible into this accordion.

This goes in the main builder JavaScript Panel

 

// Move the Header from #view_581 to #CL-Collapse  

$(document).on('knack-scene-render.scene_298', function(event, scene) {

       $( init );

       function init() {

        $('#CL-Collapse').append( $('#view_581') );

       }

});

 

This is really the only customisation you need to do – Change the scene and View number

 

You can just copy the Rich Text Panel around the App, duplicate the above and change the scene and View in the JavaScript panel above when you want to add more collapsible views.

 

Welcome feedback and ways to improve this 

Sources :

https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_accordion_symbol

https://www.elated.com/jquery-removing-replacing-moving-elements/

 

1 Like

397252071171 did you ever find a way to get this to work on submit? cc: 393445919991

Hi Robert, Thanks for feedback.

Im not seeing any issues with multi clicking on the chevron

Right now I only showing a detail view in the accordion but when I edit details using  a modal form  the detail view does not update until i refresh the whole page. Sounds like you may have a fix for that ?

tks again

Noel