I use this trick on a few different places on my site. It came about after using some less computer savvy people here at work to try to use the site. Mostly to hide parts of a form that a user doesn't need to see unless some criteria is met. Helps so they don't get confused as we know most users don't read.
Examples.
Gift Certificate page
http://www.aerostich.com/giftcert.php
The registration / checkout pages (shipping address is hidden)
https://www.aerostich.com/register.php
All we are doing is making a block of html code visible or hiding it.
I'll go through the process for the gift certificate page.
Step 1
This javascript function should be either in your javascript page or in the head or somewhere on the page.
Code:
// Function to flip visibility of certain div objects
function flipdiv(el,state) {
if(state=="show"){
status="block";
}else{
status="none";
}
document.getElementById(el).style.display = status;
}
Step 2
skin1/modules/Gift_Certificates/giftcert.tpl
Starting at about line 188
Code:
<TR><TD colspan="3"></TD></TR>
<TR><TD colspan="3" class="table_heading"><FONT class="ProductDetailsTitle">4. {$lng.lbl_gc_choose_delivery_method}</FONT></TD>
</TR>
<TR><TD colspan="3">
<table cellpadding="0" cellspacing="0" border="0" width="50%"><TR>
{if $config.Modules.enablePostMailGC eq "Y"}
<TD align="right"><INPUT type="radio" name="send_via" value="E" {if $giftcert.send_via ne "P"}checked{/if} onClick="flipdiv('sendbyemail','show'); flipdiv('sendbypostal','hide');" /></TD>
{else}
<INPUT type="hidden" name="send_via" value="E">
{/if}
<td nowrap>{$lng.lbl_gc_send_via_email}</TD>
<td width="60%" align="center">OR</td>
<td><INPUT type="radio" name="send_via" value="P" {if $giftcert.send_via eq "P"}checked{/if} onClick="flipdiv('sendbyemail','hide'); flipdiv('sendbypostal','show');" /></td>
<td nowrap>{$lng.lbl_gc_send_via_postal_mail}</td>
</TR>
</TABLE>
</TD>
</TR>
<TR>
<TD colspan="3">
<table id="sendbyemail" {if $giftcert.send_via eq "P"}style="display: none;"{/if}>
<tr>
<TD colspan="3">{$lng.lbl_gc_enter_email}
</TD></TR>
<TR>
<TD nowrap align="right">{$lng.lbl_email}</TD>
<TD><FONT class="Star">*</FONT></TD>
<TD align="left"><INPUT type="text" name="recipient_email" size="30" value="{$giftcert.recipient_email}" class="required"></TD>
</tr>
</table>
</TR>
{if $config.Modules.enablePostMailGC eq "Y"}
<tr>
<td colspan="3">
<table id="sendbypostal" {if $giftcert.send_via ne "P"}style="display: none;"{/if}
<TR><TD colspan="3">{$lng.txt_gc_enter_postal_mail}
</TD></TR>
<TR>
<TD nowrap align="right">{$lng.lbl_first_name}</TD>
<TD><FONT class="Star">*</FONT></TD>
<TD align="left"><INPUT type="text" name="recipient_firstname" size="30" value="{$giftcert.recipient_firstname}" class="required"></TD>
</TR>
<TR>
<TD nowrap align="right">{$lng.lbl_last_name}</TD>
<TD><FONT class="Star">*</FONT></TD>
<TD align="left"><INPUT type="text" name="recipient_lastname" size="30" value="{$giftcert.recipient_lastname}" class="required"></TD>
</TR>
<TR>
<TD nowrap align="right">{$lng.lbl_address}</TD>
<TD><FONT class="Star">*</FONT></TD>
<TD align="left"><INPUT type="text" name="recipient_address" size="40" value="{$giftcert.recipient_address}" class="required"></TD>
</TR>
<TR>
<TD nowrap align="right">{$lng.lbl_city}</TD>
<TD><FONT class="Star">*</FONT></TD>
<TD align="left"><INPUT type="text" name="recipient_city" size="30" value="{$giftcert.recipient_city}" class="required"></TD>
</TR>
{if $js_enabled eq 'Y' && $config.General.use_js_states eq 'Y'}
{include file="change_states_js.tpl"}
{include file="main/register_states.tpl" state_name="recipient_state" country_name="recipient_country" country=$giftcert.recipient_country|default:$userinfo.b_country|default:$config.General.default_country state=$giftcert.recipient_state|default:$userinfo.b_state full_state=$giftcert.recipient_statename|default:$userinfo.b_statename county_name="" default_county="" default_countyid="" form_name="gccreate" zipcode_name="recipient_zipcode"}
{else}
<TR>
<TD nowrap align="right">{$lng.lbl_state}</TD>
<TD><FONT class="Star">*</FONT></TD>
<TD align="left">
{include file="main/states.tpl" states=$states name="recipient_state" default=$giftcert.recipient_state default_country=$giftcert.recipient_country}
</TD></TR>
<TR>
<TD nowrap align="right">{$lng.lbl_country}</TD>
<TD><FONT class="Star">*</FONT></TD>
<TD align="left">
<SELECT name="recipient_country" size="1" onChange="javascript: check_zip_code_field(document.forms['gccreate'].recipient_country, document.forms['gccreate'].recipient_zipcode);">
{section name=country_idx loop=$countries}
<OPTION value="{$countries[country_idx].country_code}" {if $giftcert.recipient_country eq $countries[country_idx].country_code}selected{elseif $countries[country_idx].country_code eq $config.General.default_country and $userinfo.b_country eq ""}selected{elseif $countries[country_idx].country_code eq $userinfo.b_country}selected{/if}>{$countries[country_idx].country}</OPTION>
{/section}
</SELECT>
</TD>
</TR>
{/if}
<TR>
<TD nowrap align="right">{$lng.lbl_zip_code}</TD>
<TD><FONT class="Star">*</FONT></TD>
<TD align="left"><INPUT type="text" name="recipient_zipcode" size="30" value="{$giftcert.recipient_zipcode}" onChange="javascript: check_zip_code_field(document.forms['gccreate'].recipient_country, document.forms['gccreate'].recipient_zipcode);" class="required"></TD>
</TR>
<TR>
<TD nowrap align="right">{$lng.lbl_phone}</TD>
<TD></TD>
<TD align="left"><INPUT type="text" name="recipient_phone" size="30" value="{$giftcert.recipient_phone}" class="text"></TD>
</TR>
{/if}
</table>
</td>
</tr>
</div>
</FORM>
</TABLE>
<CENTER>
{if $usertype eq "C" or ($usertype eq "A" and $smarty.get.mode eq "modify_gc")}
{if $smarty.get.gcindex ne "" or ($usertype eq "A" and $smarty.get.mode eq "modify_gc")}
{if $active_modules.Wishlist ne "" and $action eq "wl"}
{ include file="buttons/gc_update.tpl" href="javascript: document.gccreate.mode.value='addgc2wl'; formSubmit();" js_to_href="Y"}
{else}
{ include file="buttons/gc_update.tpl" href="javascript: formSubmit();" js_to_href="Y"}
{/if}
{else}
{ include file="buttons/button.tpl" button_title=$lng.lbl_gc_add_to_cart href="javascript: formSubmit();" js_to_href="Y" style="button"}
{if $active_modules.Wishlist and $login ne ""}
{ include file="buttons/add_to_wishlist.tpl" href="javascript: document.gccreate.mode.value='addgc2wl'; formSubmit();" js_to_href="Y" style="button"}
{/if}
{/if}
{else}
{ include file="buttons/button.tpl" button_title=$lng.lbl_gc_create href="javascript: formSubmit();" js_to_href="Y"}
{/if}
</CENTER>
{/capture}
{include file="dialog.tpl" title=$lng.lbl_gift_certificate_details content=$smarty.capture.dialog extra="width=100%"}
In the above code you will notice a few things that are essential to making it work.
1. The table tag containing the differnt deliver fields are as follows:
The email table tag
Code:
<table id="sendbyemail" {if $giftcert.send_via eq "P"}style="display: none;"{/if}>
The postal table tag
Code:
<table id="sendbypostal" {if $giftcert.send_via ne "P"}style="display: none;"{/if}>
2. The radio buttons to specify which way to send it are as follows
Send Via Email radio button
Code:
<INPUT type="radio" name="send_via" value="E" {if $giftcert.send_via ne "P"}checked{/if} onClick="flipdiv('sendbyemail','show'); flipdiv('sendbypostal','hide');" />
Send Via Postal radio button
Code:
<INPUT type="radio" name="send_via" value="P" {if $giftcert.send_via eq "P"}checked{/if} onClick="flipdiv('sendbyemail','hide'); flipdiv('sendbypostal','show');" />
That's it, you can use it to hid several things on a page and make them appear. Have fun!