I'm using Drupal 8 paragraphs. I have a banner_header paragraph that contains three fields,

field_active_callout_tab (boolean)

field_banner_header_single (entity reference revision: paragraph)

field_banner_header_multi (entity reference revision: paragraph)

two of which are displayed in tabs like so:

paragraph fields set to display in tabs

Here is how the banner_header paragraph shows up on the content type edit form:

single link callout option

multi link callout option

When I save the content, I want the page to render with the paragraph from the tab that was active on save.

What I've done so far:

I added classes to the tabs which you can see in the image of the form display: .single-link and .multi-link. I was told that I also needed to create a boolean field to manage the display behavior, which I did with field_active_callout_tab. The way that was suggested this to work is, the bool will change depending on which tab is selected, and then I can use the bool value to determine which field is to be displayed in the twig template. The default class for this boolean seems to be '.option'.

I created a custom js file to check the status of the tab:

(function($, Drupal) {

/* Add span to wysiwyg button classes for alignment
------------------------------------ */
Drupal.behaviors.calloutControl = {
      attach: function (context, settings) {
            $('.single-link').click(function () {
                  $('.option').prop('checked', true);
            $('.multi-link').click(function () {
                  $('.option').prop('checked', false);

})(jQuery, Drupal);

And here is the banner_header template:

<div class="callout-options">
     {% if content.option == true %}
          {{ content.field_banner_header_single }}
     {% else %}
          {{ content.field_banner_header_multi }}
     {% endif %}

The bool does not change depending on the tab selection. It appears to not be impacted at all. The page will only render with the multi link paragraph, despite single link setting tab being open on save.

  1. Is the bool necessary? If so, what am I missing?

  2. If the bool is not necessary, what should I do next?

How can I get the paragraph field in the tab that was active on save, to render on the page?

2 Answers 2


Three things that immediatly come to my eye:

1) If you want to check the value of a field, don't use the render array {% content.field_whatever %}, because this returns HTML markup and not the value of the field. Most fields types can be checked with something like {% entity_type.field_name.0.value %}, in your case {% paragraph.option.0.value %}.

2) CSS class names and Twig variable names are completly different things. Are you sure the field name (machine name) of your boolean field is option? Drupal by default prefixes every field with field_, so the name should be something like field_whatever. In your twig you should use something like {% if paragraph.field_whatever.0.value %}.

3) A selector like $('.option') is super-generic and will almost certainly include other elements anywhere on the page. I don't know your theme, but in my admin theme .option is not included in the classes of checkbox. Better use something like $('input[name*="[field_whatever]"]')

  • Option is the default class, the field machine name is field_active_callout_tab. Would you recommend I set a custom class on that field and reference that instead? Also, as for the checkbox, should I see it check and uncheck as I select between the two tabs, or is that value only registered when the page is saved (and would therefore be reflected if I edited the page again?)
    – lane
    Apr 25, 2018 at 23:06
  • 1
    I just guess .option will be added by your theme to any option field on the whole page, so I would definitly use a different selector. AFAIK the Field Group module will add the custom class to a wrapping container, so you would need a descendant selector like $('.my_custom_and_unique_class .option'). - The JS code will fire on click, so it will work whenever the editor changes the value (but will only be saved to DB when the editor saves the node). But you should also add some code to make sure that the correct tab is pre-selected/initially open when the editor edits an existing node.
    – Hudri
    Apr 26, 2018 at 9:16

I think it is being called multiple times. To avoid that try Change your JS as below

$(context).find('.single-link').click(function () {
  $(context).find('.option').prop('checked', true);
$(context).find('.multi-link').click(function () {
  $(context).find('.option').prop('checked', false);


change the on click() event to hasClass() the will be classes added to the active tab

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.