ExpressionEngine: conditionally display custom fields in the form of channel input

Question

I am creating a blog site in ExpressionEngine. I have two types of records that I want to save in one channel. When a certain category is selected, I would like to show additional fields.

**EXAMPLE Channel > Article Fields: - Title - Post Body - Image - Tags Additional Fields for a category: - Price - Product Bio 

Is it possible?

Answer 1

How smart are you with JavaScript? You can use the Brandon Kelly CP and JS extension . Then use a little custom javascript to create this functionality. Not perfect, but probably faster than writing custom extensions. Roughly, you would do this:

• Create a group of channel fields and all channels and assign this group to your channel
• To make it easier to use, you need the category selector to be on the same Publish tab as the fields: create your own publication layout for this channel, which moves the Categories field on the Categories tab to the Publish tab "
• Find the channel field ID numbers that you want to hide, as they will be the HTML IDs on the publication page that look like "hold_field_ID #"
• Highlight a category identifier for a category to click to open additional fields. On the Publish page, this category will be displayed in the Categories field with the attribute "value = ID".
• Script time! Go to Extras> Extensions> CSS and JS CSS Options and add some JS to the Custom Javascript field.

Something like that:

 $(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() }; }); }); }; 

In the click handler, you may need one more logic to make sure that the fields are displayed only when the checkbox is selected (among other things), but that the main idea.

Answer 2

Is this required on the control panel or on the front of the site?

Answer 3

To do this using categories as a trigger, you need to write a custom extension that will add javascript to show and hide.

You might want to see the “Input Type” , in which you can use the drop-down menu to change the displayed fields.