ExpressionEngine: Conditionally display custom fields in a channel entry form

Question

I'm building a blog site in ExpressionEngine. I have two types of entries that I want to keep in the same channel. When a certain category is selected i'd like to show additional fields.

**EXAMPLE
Channel > Article
    Fields:
       - Title
       - Post Body
       - Image
       - Tags

    Additional Fields for a category:
       - Price
       - Product Bio

Is this possible?

unexplainedBacn · Accepted Answer · 2011-12-03T20:01:39.613

How savvy are you with JavaScript? You could use Brandon Kelly's CP CSS & JS extension. Then use a little custom javascript to build that functionality. Not perfect, but probably faster than writing a custom extension. Roughly, you'd do this:

Create the channel fields group and all the channels, and assign that group to your channel
To make it a little more usable, you'll want the category selector to be on the same Publish tab as the fields: Create a custom publish layout for that channel that moves the Categories field from the Categories tab to the Publish tab
Find the id numbers of the channel fields that you want to hide, as those will be HTML IDs in the Publish page that look like "hold_field_ID#"
Figure out the category ID for the category to click to reveal additional fields. In the Publish page, that category will show up in the Categories field with a "value=ID" attribute.
Script time! Head to Add-ons > Extensions > CP CSS & JS settings and add some JS in the Custom Javascript field.

Something like this:

$(document).ready(function() { 

   // Cache the divs with your channel fields  
   var $theSecretFields = $('#hold_field_5, #hold_field_6');

   // Hide them
   $theSecretFields.each(function() {
       // But only if they're empty (no previous saved data)
       // If you're using a textarea or something else, change the .find selector
       if ( $(this).find('input').val() === ''  ) { $(this).hide() };
   });

   // When you click the category ID (the input[value="id"] selector)...  
   $('#hold_field_category').find('input[value="12"]').click(function() {  
      // Toggle the visibility of the channel fields
      // Again, only show/hide them if they're empty
      $theSecretFields.each( function() {
         // Again, change the .find selector for your field type if necessary
         if ( $(this).find('input').val() === ''  ) { $(this).toggle() };
      });
   });  
};

You might have to build in some more logic in the click handler to make sure that the fields are only shown when the checkbox is selected (among other things), but that's the basic idea.

You'd also want to make sure that when a saved entry was edited, the fields wouldn't be hidden if they contained previously-saved data. But this is the right path! — Derek Hogue, Dec 02 '11 at 15:46

score 0 · Answer 2 · answered Dec 01 '11 at 19:44

0

You want this within the control panel or the front end of the site?

answered Dec 01 '11 at 19:44

Brad

12,054
44
118
187

score 0 · Answer 3 · answered Dec 02 '11 at 15:39

To do this with categories as the trigger, you'll need to write a custom extension that adds the javascript to do your showing and hiding.

You might want to look at the Entry Type add-on, which allows you to use a dropdown menu to change the fields which are displayed.

ExpressionEngine: Conditionally display custom fields in a channel entry form

3 Answers3