버튼을 클릭하면 div를 확장/축소하고 새 줄을 추가하는 방법

Question

divs가 있고 버튼을 클릭 할 때 확장/축소 내 클라이언트가 양식에 더 많은 div를 추가 할 수있는 함수가 필요합니다. 당신이 HTML 방금 새로운 요소를 각각 생성됩니다 추가하면 사진에서처럼 버튼을 클릭하면, 자사가 작동하지 내가 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

을 발생하지 클릭하는 시간. 언제든지 페이지에 display:none으로 HTML을 넣은 다음 jQuery .toggle() 또는 .slideToggle()을 사용하여 펼치거나 접을 수 있습니다.