CSS Conditional Fields on pre-existing WordPress Form

1 Views

I have a long Memberpress form that needs some conditional fields. If x is checked, then field y is shown and so on.

I’ve been trying with CSS but have been unsuccessful so far. I can’t really hack anything. The html is output by Memberpress extra fields. I need to handle it all with CSS.

Read More

Here’s the html. 

<div class="mp-form-row mepr_custom_field mepr_mepr_have_you_taken_the_mccee_exam">
    <label for="mepr_have_you_taken_the_mccee_exam" class="mepr-checkbox-field mepr-form-input " >
        <input type="checkbox" name="mepr_have_you_taken_the_mccee_exam" id="mepr_have_you_taken_the_mccee_exam"  />
          I have taken the MCCEE exam        
    </label>
</div>

<div class="mp-form-row mepr_custom_field mepr_mepr_date_of_mccee_exam">
    <div class="mp-form-label">
        <label for="mepr_date_of_mccee_exam">Date of MCCEE exam:</label>
        <span class="cc-error">Date of MCCEE exam is not valid</span>
    </div>
    <input type="text" name="mepr_date_of_mccee_exam" id="mepr_date_of_mccee_exam" value="" class="mepr-date-picker mepr-form-input "  />
</div>

<div class="mp-form-row mepr_custom_field mepr_mepr_mccee_score">
    <div class="mp-form-label">
        <label for="mepr_mccee_score">MCCEE Score:</label>
        <span class="cc-error">MCCEE Score is not valid</span>
    </div>
    <input type="text" name="mepr_mccee_score" id="mepr_mccee_score" class="mepr-form-input " value=""  />
</div>

What I would like to happen is this: when someone clicks the checkbox “I have taken the MCCEE exam” I want the other two fields to become visible.

I think the problem is the elements are in different DIVs.

Here’s the CSS I’m trying. 

.mepr_mepr_date_of_mccee_exam {
    display:none
}
.mepr_mepr_mccee_score {
    display:none
}
#mepr_have_you_taken_the_mccee_exam:checked ~ .mepr_mepr_date_of_mccee_exam,
#mepr_have_you_taken_the_mccee_exam:checked ~ .mepr_mepr_mccee_score {
    display:block
}

I tried a few different combinations but nothing works. Any help would be appreciated. I’ve been at this for days.

Post Views: 1

Related posts