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.
- 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.
- 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.
- 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/