Show and Hide page items depending on Select list value in APEX using jQuery

In Oracle Apex application, you can hide and show items at page rendering point very nicely using in-built Item Display Condition. But when it comes to show/hide items in the create record page you might have to use other techniques like javascript, jQuery etc.

In this example I want to hide couple of fields depending on select list values simply because they are not relevant to the user selection in the drop-down list. I want to toggle those fields based on user selection in the drop-down list. I also want to hide the relevant labels as well when the text field is hidden. Here is the screen looks like before hiding the fields.

In this example, I want to hide Due date and Completed Date if user select Weekly, Daily and As Necessary and show these date fields if they choose the other options. I have used jQuery to accomplish this task. Please the following jQuery in the headers section of you Apex page.

$(document).ready(function() {

    $('#P161_FREQUENCY').change(function() {

        var str = $('#P161_FREQUENCY :selected').val();
        if (str == 'WEEKLY' ¦¦ str == 'DAILY' ¦¦ str == 'AS_NECESSARY') {
            $('label[for=P161_DUE_DATE],#P161_DUE_DATE,#P161_DUE_DATE_IMG').hide();
            $('label[for=P161_COMPLETED_DATE],#P161_COMPLETED_DATE,#P161_COMPLETED_DATE_IMG').hide();

        }
        else {
            $('label[for=P161_DUE_DATE],#P161_DUE_DATE,#P161_DUE_DATE_IMG').show();
            $('label[for=P161_COMPLETED_DATE],#P161_COMPLETED_DATE,#P161_COMPLETED_DATE_IMG').show();
        }

    });

});

In the above javascript function, I am also hiding the associated items for those date fields. So I want to hide the label and Date picker image along with date fields. Here is the screen shot when user select Daily in the Frequency drop-down list.

Bear in mind, you must have to implement jQuery if you are using APEX 3.x.

Easy and simple work to show and hide items in APEX using jQuery. Happy programming.