Freemarker中点击按钮显示某些内容

上网时看到那些令人眼前一亮的功能时，就会感觉相当舒服~今天做了一个很小的功能，记录下。。。

需求：现在需要点击查看按钮显示加油卡和vip卡号记录，不点击时不显示、、
好处：有些数据查询很耗资源，所以用户不要求看时可以不查
1,js:
$().ready( function() {
var $vipCard=$("#vipCard");//button的id
	var $viptd=$("#viptd");//需要加入的位置id
	$vipCard.click(
		function() {
			<@compress single_line = true>
				var personTrHtml = 
                                //加入的内容
				'<lable id="vip" >
					<#list vipCardList as cards>//vipCardList 通过后台action中getVipCardList()方法
						${cards.fnumber}&nbsp;&nbsp;
					</#list>
				</lable>';
			</@compress>
			$viptd.append(personTrHtml);
			document.getElementById("vipCard").disabled="false";
		}
	);
);

2,body:
<td id="viptd">
						<#if isAddAction>
							<input type="text" name="vipCardNum" class="formText"  title="输入VIP卡号" />
						<#else>
							<input type="text" name="vipCardNum" class="formText"  title="输入VIP卡号" /><input id="vipCard" type="button" value="查看">
						</#if>
					</td>

3，java：

public List<VipCard> getVipCardList(){
		member = memberService.load(id);
		Set<VipCard> vipCardSet=member.getVipCardSet();
		List<VipCard> vipCardList=new ArrayList<VipCard>(vipCardSet);
		return vipCardList;
	}