...

View Full Version : Suppressing/hiding content with checkboxes queries



quikflyer
09-30-2008, 10:50 PM
hey peeps, I have requirement when user can select different terms and condition, and if use check on one, the related T&C should show. I have this working but it seems that the location of the content is fixed. my code is per below



<U><B>Terms and conditions</b></u>
<li><input type="checkbox" onclick="document.getElementById('info_terms1').style.visibility = this.checked ? 'visible' : 'hidden'"> Terms1<br>
<li><input type="checkbox" onclick="document.getElementById('info_terms2').style.visibility = this.checked ? 'visible' : 'hidden'"> Terms2<br>

<br>
<div id="info_terms1" style="visibility:hidden"> terms1 condition <P>
terms1 condition <P>
terms1 condition <P>
terms1 condition <P>
terms1 condition <P>

</div>

<div id="info_terms2" style="visibility:hidden">
terms2 condition <P>
terms2 condition <P>
terms2 condition <P>
terms2 condition <P>
</div>

1) It seems that the DIVs location is fixed. If I checked on terms2 only, the content of terms2 seems to be at the bottom. Therefore it seems fixed. Is there a way that terms2 can be at the top if it's checked and terms1 is not?

2) How do we default to checked?

Many thanks!!!

Cheers

rangana
10-01-2008, 04:42 AM
Play with the display property, instead of the visibility property:


<U><B>Terms and conditions</b></u>
<li><input type="checkbox" onclick="document.getElementById('info_terms1').style.display=this.checked?'':'none'"> Terms1<br>
<li><input type="checkbox" onclick="document.getElementById('info_terms2').style.display=this.checked?'':'none'"> Terms2<br>

<br>
<div id="info_terms1" style="display:none;"> terms1 condition <P>
terms1 condition <P>
terms1 condition <P>
terms1 condition <P>
terms1 condition <P>

</div>

<div id="info_terms2" style="display:none;">
terms2 condition <P>
terms2 condition <P>
terms2 condition <P>
terms2 condition <P>
</div>


If you want to check by default, then add a checked attribute:


<input type="checkbox" onclick="document.getElementById('info_terms1').style.display=this.checked?'':'none'" checked="checked">


...and remove the show the corresponding div, by removing highlighted:


<div id="info_terms1" style="display:none;">


Hope that makes sense.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum