How can I display the field in the tab that was active on save?

Question

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:

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

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 %}
</div>

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?

Answer 1

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]"]')

Answer 2

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

OR

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