Collapsible Sections based on Data Page Checkbox

[bJamble]

I am trying to create collapsible sections per the instructions on the support site at:

http://howto.caspio.com/tech-tips/creating-collapsible-sections/

I have the button functionality working great, but I am trying to modify the code to expand and collapse the sections based on a checkbox (for a field in my table) on the data page. Does anyone know if this is possible? The idea is to record the entry into the database table for the main category (the checkbox), and then be able to specify the selection further with the collapsible section that has more checkboxes within it. I would use a cascading dropdown, but I need the opportunity to choose multiple values if necessary. I am a noob to Javascript, so any help would be appreciated. Thanks.

[eprouver]

Hi bJamble,

What you're asking about is possible, but if you want to toggle a div on and off using a checkbox you have to add a function to the onchange event (not onclick). Here's an example of getting a checkbox by ID and then adding a function called "check" which toggles a div with id "displayer".

You can probably paste this right into a DataPage and use a virtual field as a checkbox to test it out. You might have to use a table around your other checkboxes instead of a div though. Also this JavaScript has to go after the checkbox field so it can find it and add the onchange function.

JavaScript's tough in the beginning, but I'm sure you'll get the hang of it.

Eprouver

<div id="displayer" style="background:#cccccc; display:none;">
Hello there !
</div>

<script>
function check(){

if(document.getElementById('cbParamVirtual1').checked)
{document.getElementById('displayer').style.display ="inline";}
else
{document.getElementById('displayer').style.display ="none";}
}

document.getElementById('cbParamVirtual1').onchange = check;

</script>

[bJamble]

Thanks eprouver!

You gave me just what I needed for the functionality. Per your suggestion, I modified the code to use a table to surround the secondary checkboxes and replaced the virtual field with my primary checkbox field, and it worked perfectly. This also halved the amount of original code I had in the html block - I was trying to figure out a workaround, and needless to say, it wasn't going well. It felt like I was hitting my head against a wall over and over trying different iterations in the code, which I completely do not understand.