expand/collapse text in form

Hi all!

I would like to expand (and collapse) text under one of the form labels.
I have "Terms and Conditions" label in form with the check box "I accept".
What I need is - when click on "Terms and Conditions" label, the text of these terms expands under the label.

Or probably this text could appear as popup window - like here in chronoengine site when FAQ section questions get clicked.

I guess some java script would do it?

Some code example would be great.

Here I paste also my form HTML code if it helps,

<div class="form_item">
  <div class="form_element cf_checkbox">
  <label class="cf_label" style="width: 150px;">Terms and Conditions</label>
  <div class="float_left">

      <input value="I accept" title="Please accept Terms and Conditions before continue"      class="radio validate-one-required" id="check00" name="t_and_c" type="checkbox" />
      <label for="check00" class="check_label">I accept</label>
      <br />
  </div>
  </div>
  <div class="cfclear"> </div></div>

<div class="form_item">
  <div class="form_element cf_button">
    <input value="Donate" name="button_5" type="submit" />
  </div>
  <div class="cfclear"> </div>
</div>

Thanks,
Raivis

Hi raivis,

The 'pop up window' is technically a Modal window and there are many posts here or at Joomla! Docs that will tell you more about that.

here's a code snippet that should expand the text as you describe. In the Form HTML:

<div class="form_item">
  <div class="form_element cf_checkbox">
    <label class="cf_label" style="width: 150px;" id='show_tandc' >Terms and Conditions</label>
     <div class="float_left">
      <input value="I accept" title="Please accept Terms and Conditions before continue"      class="radio validate-one-required" id="check00" name="t_and_c" type="checkbox" />
      <label for="check00" class="check_label">I accept</label>
    </div>
  </div>
  <div class="cfclear"> </div>
</div>
<div class="form_item">
  <div id='tandc' style='display:none;'>
    Add your terms and conditions text here.
  </div>
  <div class="cfclear"> </div>
</div>

Note the id attributes show_tandc and tandc

In the Form JavaScript box

window.addEvent('domready', function() {
  $('show_tandc').addEvent('click', function() {
    var display = $('tandc').getStyle('display');
    if ( display == 'none' ) {
      $('tandc').setStyle('display', 'block');
    } else {
      $('tandc').setStyle('display', 'none');
    }
  });
});

Bob

Great!

Thanks Bob,

Brgds,
Raivis