Forums

I have followed your instructions on how to hide a text input which becomes visible if a check box is ticked. This worked beautifully.
Ideally I require several hidden text inputs to become visible. I am a complete novice. I have tried creating a new JS load for each text area and also using the same text area ID on the text inputs. Neither of these methods worked.

Any suggestions would be greatly appreciated.

Hi Amy,

Please place all your textboxes inside a "container" and set it be hidden on load, then just toggle this container using the checkbox!

Regards,
MAx

Blimey that was quick! I'm sorry I didn't understand your answer. Just to give you an idea of my ignorance I have now looked up how to set up a container. This is fine and I have added some text boxes in there. I am not sure how to set the container to be hidden on load. Is it a similar method as described to show just one hidden text input by using a JS load and code?

On the events, on load I tried using the JS load action using the the container class name (driver_details) instead of the text area as follows

var checkbox_id, textarea_id, checkbox, textarea, div;

checkbox_id = 'checkbox';
textarea_id = 'driver_details'

window.addEvent('domready', function() {
  checkbox = $(checkbox_id);
  textarea = $(textarea_id);
  div = $(textarea_id+'_container_div');
  div.dissolve();
  showHide();
  checkbox.addEvent('click', showHide);
});

function showHide() {
  if ( checkbox.checked ) {
    div.reveal();
    textarea.disabled = false;
  } else {
    div.dissolve();
    textarea.value = '';
    textarea.disabled = true;
  }
}

Hi Amy,

You can hide the container on load by changing its "load state" just like any other field, you must have the last update for this through, released 2 days ago.

Then you hide the container just like any other field, by using its id in the Events section of the checkbox!

You don't need any custom JS to achieve this.

Regards,
Max