How can I make the content of <field> show only once/under the checkbox clicked?

Question

The additional_details_option2 must be under and only appear when the value="Industry" clicked. I keep trying the basic logic of conditional statement, but once I reload the page the editor field is already showing even tho I'm not clicking the checkbox. I know I should use the if/else and js for conditions but Im trying and the result will always be the same. Tried to use ChatGpt but still, not properly working. Hope u help me guys. Using joomla as framework and tinymce as editor. This is my code.

XML Code:

        <field 
            name="dummy"
            type="checkboxes"
            label="Dummy Sample"
            description="dummy"
        >
            <option value="Number ">Number </option>
            <option value="Industry">Industry</option>
            <option value="journal publication"> journal publication</option>

        </field>

        <field
            name="additional_details_option2"
            type="editor"
            label="Additional Details"
            class="textareafield"
            required="true"
            cols="10"
            rows="5"
            width="100%"
            height="200"
            filter="safehtml"
        />

JS Code:

document.addEventListener('DOMContentLoaded', function () {
    var checkboxOption2 = document.querySelector('input[name="jform[dummy][]"][value="Industry"]');
    var additionalDetailsField = document.querySelector('[name="jform[additional_details_option2]"]');

    checkboxOption2.addEventListener('change', function () {
        if (this.checked) {
            additionalDetailsField.style.display = 'block';
        } else {
            additionalDetailsField.style.display = 'none';
        }
    });
});

this is ALWAYS the result after I reload

Is there any way I can change it or add in the code to meet the specific expectations?

Answer 1

Maybe you can use JavaScript (I'll use JQuery) and property hidden.

$(document).ready(function() {
        $('#industry').on('change', function() {
            var isChecked = $(this).prop('checked');
            $('field[name="meta]').prop('hidden', !isChecked);
        })
})

You will need to add the id "industry" to your option with value "Industry".

Answer 2

You just need to set the style of the target element initially.

// encapsulate the logic for reuse (for different checkboxes)
function attachCheckbox(triggerName, triggerValue, targetName) {
  // fetch the checkbox
  const trigger = document.querySelector(`input[name="${triggerName}"][value="${triggerValue}"]`);
  // fetch the target to show/hide
  const target = document.querySelector(`[name="${targetName}"]`);
  // hide target initially
  target.style.display = 'none';
  
  // add event listener to check target display
  trigger.addEventListener(
    'change',
    function() {
      target.style.display = trigger.checked ? 'block' : 'none';
    }
  );
}

// attach logic to checkbox
attachCheckbox('jform[dummy][]', 'Industry', 'jform[additional_details_option2]');

<label><input type="checkbox" name="jform[dummy][]" value="Industry">Industry</label>
<textarea name="jform[additional_details_option2]">Additional Details</textarea>