"Other" Text Entry

Do I understand correctly you want something like the standard “Allow Text Entry” functionality, but with clearing the data on deselecting? Or do you really want to achieve a text entry box that isn’t there, only appears on clicking the “Other”, and then is staying visible?

Because for the standard one, hiding the text entry box could be done just with the CSS, no script would be needed, and the fact it can again disappear on deselection does not sound like a bad idea.

I tried to extend the addOnReady function for a dedicated question so it hides and empties the box whenever it is not selected, but I am not completely sure that is what you’re after:

Qualtrics.SurveyEngine.addOnReady(function () {
  // Helper: label -> its adjacent text input/textarea
  function getTextFieldForLabel(label) {
    const next = label.nextElementSibling;
    if (!next) return null;
    const tag = next.tagName.toLowerCase();
    return (tag === 'input' || tag === 'textarea') ? next : null;
  }

  // Find SA/MA labels in the current question
  const labels = document.querySelectorAll(
    '.Skin label.SingleAnswer, .Skin label.MultipleAnswer'
  );

  labels.forEach((label) => {
    const field = getTextFieldForLabel(label);
    if (!field) return;

    // Hide by default via inline styles
    field.style.display = 'none';
    field.style.boxSizing = 'border-box';

    // Apply visual & value state based on q-checked
    const applyState = () => {
      const isChecked = label.classList.contains('q-checked');

      if (isChecked) {
        field.style.display = 'inline-block';          // or 'block' for full width
      } else {
        // Hide and clear on deselection
        field.style.display = 'none';

        // Clear the value (input or textarea)
        // Use value = '' to reset user text
        if (field.value !== '') {
          field.value = '';
        }
      }
    };

    // Initial evaluation
    applyState();

    // Observe class changes on the label (Qualtrics toggles q-checked)
    const mo = new MutationObserver(applyState);
    mo.observe(label, { attributes: true, attributeFilter: ['class'] });

    // Optional: respond immediately on click as well
    label.addEventListener('click', () => setTimeout(applyState, 0));
  });
});