Hi Zarachy,
I managed to set it up with a series of select questions using the code below ( I set up the question text as header2 for styling purposes of a Text field that needs to go on the same page).
<style>
div.header2 {
background-color: #eee !important;
color: #444;
cursor: pointer;
padding: 5px;
border: none;
outline: none;
transition: 0.4s;
}
div.header2.active, button.header2:hover {
background-color: #ddd;
}
div.header2:after {
content: '\002B';
color: #777;
font-weight: bold;
float: right;
margin-left: 5px;
}
div.header2.active:after {
content: "\2212";
}
div.question_body.indent {
padding: 0 8px;
background-color: white;
max-height: 0;
overflow: hidden;
transition: max-height 0.2s ease-out;
}
</style>
<script>
// W3C's JS Code (
https://www.w3schools.com/howto/howto_js_accordion.asp)
var acc = document.getElementsByClassName("header2");
var radio = document.getElementsByClassName("header2");
var i;
// Open the first accordion
var firstAccordion = acc[0];
var firstPanel = firstAccordion.nextElementSibling;
firstAccordion.classList.add("active");
firstPanel.style.maxHeight = firstPanel.scrollHeight + "px";
// Add onclick listener to every accordion element
for (i = 0; i < acc.length; i++) {
acc[i].onclick = function() {
// For toggling purposes detect if the clicked section is already "active"
var isActive = this.classList.contains("active");
// Close all accordions
var allAccordions = document.getElementsByClassName("header2");
for (j = 0; j < allAccordions.length; j++) {
// Remove active class from section header
allAccordions[j].classList.remove("active");
// Remove the max-height class from the panel to close it
var panel = allAccordions[j].nextElementSibling;
var maxHeightValue = getStyle(panel, "maxHeight");
if (maxHeightValue !== "0px") {
panel.style.maxHeight = null;
}
}
// Toggle the clicked section using a ternary operator
isActive ? this.classList.remove("active") : this.classList.add("active");
// Toggle the panel element
var panel = this.nextElementSibling;
var maxHeightValue = getStyle(panel, "maxHeight");
if (maxHeightValue !== "0px") {
panel.style.maxHeight = null;
} else {
panel.style.maxHeight = panel.scrollHeight + "px";
}
};
}
// Cross-browser way to get the computed height of a certain element. Credit to @CMS on StackOverflow (
http://stackoverflow.com/a/2531934/7926565)
function getStyle(el, styleProp) {
var value, defaultView = (el.ownerDocument || document).defaultView;
// W3C standard way:
if (defaultView && defaultView.getComputedStyle) {
// sanitize property name to css notation
// (hypen separated words eg. font-Size)
styleProp = styleProp.replace(/([A-Z])/g, "-$1").toLowerCase();
return defaultView.getComputedStyle(el, null).getPropertyValue(styleProp);
} else if (el.currentStyle) { // IE
// sanitize property name to camelCase
styleProp = styleProp.replace(/\-(\w)/g, function(str, letter) {
return letter.toUpperCase();
});
value = el.currentStyle[styleProp];
// convert other units to pixels on IE
if (/^\d+(em|pt|%|ex)?$/i.test(value)) {
return (function(value) {
var oldLeft = el.style.left, oldRsLeft = el.runtimeStyle.left;
el.runtimeStyle.left = el.currentStyle.left;
el.style.left = value || 0;
value = el.style.pixelLeft + "px";
el.style.left = oldLeft;
el.runtimeStyle.left = oldRsLeft;
return value;
})(value);
}
return value;
}
}
</script>
However, I would like it to automatically close the active accordion (i.e. select question) and open the next one if a response option (radio button) is chosen, rather than having to click on the accordion(i.e., header2). Do you maybe have a suggestion on how to do that?
