Hello everyone
I am trying to aplly css to my web form
I have used Hooks .py for it but it applied to all forms
I also used used custom script but it didn’t work
I want to make collapsible section in my web form i have used following code for that but it is not working
CSS
/* Make section headers clickable */
.section-head {
cursor: pointer;
background-color: #f0f0f0;
padding: 10px;
border-radius: 5px;
margin-bottom: 10px;
font-weight: bold;
display: flex;
justify-content: space-between;
align-items: center;
}
/* Add a dropdown arrow indicator */
.section-head::after {
content: "▼";
font-size: 14px;
transition: transform 0.2s ease-in-out;
}
/* Change arrow direction when collapsed */
.section-head.collapsed::after {
content: "▲";
}
/* Hide collapsed sections */
.section-body.collapsed {
display: none;
}
JS
document.addEventListener(“DOMContentLoaded”, function () {
// Add click event listeners to all section headers
document.querySelectorAll(".section-head").forEach(function (header) {
header.addEventListener("click", function () {
// Find the corresponding section body
let body = this.nextElementSibling;
// Check if the body has the class 'section-body'
if (body && body.classList.contains("section-body")) {
// Toggle the 'collapsed' class on the body
body.classList.toggle("collapsed");
// Toggle the 'collapsed' class on the header
this.classList.toggle("collapsed");
}
});
});
});