Jump to content
  • 0

Collapsible Sections based on Data Page Checkbox


bJamble
 Share

Question

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.

Link to comment
Share on other sites

2 answers to this question

Recommended Posts

  • 0

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>
Link to comment
Share on other sites

  • 0

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.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
 Share

×
×
  • Create New...