Control Panel : Hide/show channel fields in channel with custom JS

Question

Is it possible to control if fields could be shown or hidden in the control panel channel publish/edit form depending on whether an options was selected or a value inputted?

For example if I had an input for 'first name' and a user types in that input the 'last name' input would show.

I am thinking this would be be controlled by some JS I have been able to add somewhere. Each channel would have its own JS script.

My thinking behind this is so user don't complete fields they don't need to and then it requires less conditionals in the templates.

Answer 1

Use CP CSS & JS to inject some JQuery.

Then target form#publishForm, something like this

if ($("form#publishForm #hold_field_19").val() == "") {
    $("form#publishForm #hold_field_19").hide();
}
$("form#publishForm #field_18").on('input', function() {
    if ($(this).val() != "") {
        $("form#publishForm #hold_field_19").fadeIn();
    }
}

Assumes field_18 is first name and field_19 is last name.

One problem you may need to add conditionals for in the JQuery is if the first name is empty, but last name is not - you don't want to hide the last name field. Also need to check if the first name is deleted during the editing, should the last name disappear at that point?

"then it requires less conditionals in the templates."

Not quite sure how that's going to change as you're still going to want to know if a field has a value to display it or not...?

Remember for different channels you can change the layout and what fields are shown hidden (albeit permanently and not relevant to other fields having a value).

Answer 2

The Expression Engine add-on called Entry Type by Rob Sanchez allows you to add a custom field to that lets you create a toggle to show and hide any combination of fields on your publish page. Very handy.

http://devot-ee.com/add-ons/entry-type