Hide checkbox group in APEX using jQuery

In Oracle APEX I wanted to show and hide a check box group depending on the value of another text-field. I guess it is quite handy when you want to hide irrelevant fields from the page and when you have too many fields to avoid scrolling. This feature may also give good user experience. I am assuming you already have some knowledge about jQuery and know a little of it. For details please visit http://jquery.com

To do this I have used jQuery and did a bit hack in APEX html code. In this scenario, I have Revised Cost field and Reason for revision check boxes. Now I do not want to display the check boxes unless Revised Cost field is not empty and when user click on that field to enter data. Here is the screen capture of my page –

[important]I am actually using APEX 3.2 for this exercise. I am sure you could do it much more easier way in APEX 4.x. [/important]

Once the page is rendered, view the source code of the page. You can right click on the middle of screen and click on view source in Internet Explorer. In FireFox just right click on the middle of the page then click on view page source.

Now I am looking for the relevant html code for these fields. The code will look like this –

<input type="text" name="p_t29" size="12" maxlength="2000" id="P3_FAC_REVISED_COST"
        value="332" />
    <div id="content">
    </div>
    <label for="P3_REASON_COST_REVISED">
        <a style="text-decoration: none; font-weight: bold;" href="javascript:popupFieldHelp('23893628613382143','198940878990662')"
            tabindex="999">Reason for revision:</a></label>
    <fieldset id="P3_REASON_COST_REVISED" class="checkbox_group">
        <input type="checkbox" name="p_v31" value="INITIAL_UNKNOWN" id="P3_REASON_COST_REVISED_0" /><label
            for="P3_REASON_COST_REVISED_0">Initial cost is unknown</label><br />
        <input type="checkbox" name="p_v31" value="DIFFERENT_DESIGN" id="P3_REASON_COST_REVISED_1" /><label
            for="P3_REASON_COST_REVISED_1">New asset will have different design or materials</label><br />
        <input type="checkbox" name="p_v31" value="TODAYS_INACCURATE" id="P3_REASON_COST_REVISED_2" /><label
            for="P3_REASON_COST_REVISED_2">Today's cost was inaccurate</label><br />
    </fieldset>

Now examine the above code, all the check boxes are inside the fieldset. I can actually hide the whole field set instead of individual check boxes. You can hide individual check boxes if you want. I also have to hide the relevant label to hide/show based on the value of the text field.

Place the following javascript in the header section or footer section of the page –

<script type="text/javascript">
$(document).ready(function () {

        // get the text field value
        var pr = $('#P3_FAC_REVISED_COST').val();

        if (pr.length === 0) {
            //hide the label if above condition matches
            $("label[for=P3_REASON_COST_REVISED],#P3_REASON_COST_REVISED").hide();
            //hide the text field if above condition matches
            $('#P3_REASON_COST_REVISED').hide();
        }

        $('#P3_FAC_REVISED_COST').click(function () {

            //for new entry I want to show the fields if user click on the text field

            $("label[for=P3_REASON_COST_REVISED],#P3_REASON_COST_REVISED").show();
            $('#P3_REASON_COST_REVISED').show();

        });

    });

</script>

The page in action now –

But when the field has some values, it does not hide any more –