如何展开/折叠并在点击按钮时将新行添加到div

Question

我有一些div，当点击按钮展开/折叠我需要一个函数，允许我的客户端在窗体上添加更多的div像图片上的附着

我曾尝试follwing代码，它的按钮点击不工作时，什么都不会发生

<div class="divVisible" id="mytable"> 
<p><label class="field2">Centro de Custo:</label><input type="text" class="text" id="centroCusto" name="centroCusto"></p> 
<p><label class="field">Conta Contabil:</label><input type="text" class="text" id="contaContabil" name="contaContabil"/></p> 
<p><label class="field">Periodo:</label><input type="text" class="num" id="date" name="date"/></p> 
<p><label class="field">Saldo:</label><input type="text" class="num" id="saldo" name="saldo"/></p> 
<p><label class="field">Saldo Total:</label><input type="text" class="num" id="saldoTotal" name="saldoTotal"/></p> 
</div> 
<input id="show_hide" type="button" value="Collapse/Expand" /> 
</div> 
</fieldset> 
</form> 
</body> 
<script type="text/javascript"> 
$("#show_hide").click(function() { 
$("#mytable").append('<p><label class="field">Saldo:</label><input type="text" class="num" id="saldo" name="saldo"/></p>'); 
}); 
</script> 

Answer 1

如果追加那你就只能创建每个新元素的HTML当你点击。您始终可以在页面上使用display:none，然后使用jQuery .toggle()或.slideToggle()扩展/折叠。