Hide/Show question based on selection

Question

I am coming from SSI 6.6.18 to Lighthouse, thus going through some growing pains about learning the way things are referenced. In the past I had used CSS to hide a multiple questions, then using Javascript would show/hide them if a selection in the first question was selected/deselected.  With this newest version my old code is no longer working, and I can't seem to identify why.

The idea is this:
Q11 is a multiple select, with a Q11a,b,c,d, and e follow up for each of Q11's items. So all followup div's are hidden on page load. Then if I select Q11_1, Q11a comes into view. Deselect Q11_1 and Q11a hides. This goes on for each response option.

Any help would be greatly appreciated!

Answer 1

Lighthouse check boxes are a bit different than regular check boxes, which may be the cause of your problem switching from v6 to Lighthouse.  The function SSI_CustomGraphicalCheckbox can be very helpful for situations where you want to actively watch for changes to a Lighthouse check box.

Here's the code I put in my Q11 to accomplish your goal:

<script type="text/javascript">
$(document).ready(function(){
    $('#Q11a_div').hide();
    $('#Q11b_div').hide();
    $('#Q11c_div').hide();
    $('#Q11d_div').hide();
    $('#Q11e_div').hide();
})

function SSI_CustomGraphicalCheckbox(graphicalCheckboxObj, inputObj, boolCheck) {
    var id = '';
    var disp = boolCheck ? 'block' : 'none';
    switch (inputObj.name) {
        case 'Q11_1':
            id = 'Q11a_div';
            break;
        case 'Q11_2':
            id = 'Q11b_div';
            break;
        case 'Q11_3':
            id = 'Q11c_div';
            break;
        case 'Q11_4':
            id = 'Q11d_div';
            break;
        case 'Q11_5':
            id = 'Q11e_div';
            break;
    }
    document.getElementById(id).style.display = disp;
}
</script>

Comments

Worked flawlessly! Thank you and thanks for the quick response.

That code is significantly different from what I had been using previously, and honestly outside my current knowledge of jQuery - so would have taken forever to get this done.

---

This is good stuff Zachary!  I've been asked to do this type of thing before and could never quite get it right and found work arounds instead.  This will definitely go into my tool chest.  Nicely done.

---

I'm glad to hear the positive reactions from you two!

Ron: Only lines 2 through 8 are jQuery.  The rest of the code is just plain JavaScript.  If you have questions about how it works, I can explain it for you.

---

Hey Zachary, what would it take to make this work with a single select question. I thought I would simply change the case to Q11==1, but that clearly does not work. I am not sure if my syntax is wrong, or if the way I reference a question name has changed since 6.6.18

---

Ron, sorry I missed your question; I must have missed the email notification.  If you still need this functionality, please see my response to S. Klinke's related question.

---

No worries. That should do the trick! Thank you for pointing me over to your response.