hide/reveal 输入字段 asp

Question

我正在尝试创建一个网络表单，用户可以在其中输入多个资格，我想创建一个添加更多详细信息按钮，并试图通过隐藏一些输入字段来实现，这些输入字段随后会显示出来单击按钮时，最好的方法是什么，这是我目前的 asp 代码

<div class="tab-pane" id="four">
   <h2>Qualifications</h2>
   <br />
   <asp:Label runat="server" ID="lblQualSubject" AssociatedControlID="ddlQualSubject" CssClass="Emlabel"> Qualification Subject/Code: </asp:Label><asp:DropDownList ID="ddlQualSubject" runat="server" CssClass="Eminput"/>
   <br />
   <asp:Label runat="server" ID="lblQualYear" AssociatedControlID="txtQualYear" CssClass="Emlabel"> Qualification Year: </asp:Label><asp:TextBox ID="txtQualYear" runat="server" CssClass="Eminput" />
   <br />
   <asp:Label runat="server" ID="lblQualGrade" AssociatedControlID="txtQualGrade" CssClass="Emlabel"> Qualification Grade: </asp:Label><asp:TextBox ID="txtQualGrade" runat="server" CssClass="Eminput" /><br />
   <br />
   <asp:Label runat="server" ID="lblQualSubject2" AssociatedControlID="ddlQualSubject2" CssClass="Emlabel"> Qualification Subject/Code: </asp:Label><asp:DropDownList ID="ddlQualSubject2" runat="server" CssClass="Eminput"/>
   <br />
   <asp:Label runat="server" ID="lblQualYear2" AssociatedControlID="txtQualYear2" CssClass="Emlabel"> Qualification Year: </asp:Label><asp:TextBox ID="txtQualYear2" runat="server" CssClass="Eminput" />
   <br />
   <asp:Label runat="server" ID="lblQualGrade2" AssociatedControlID="txtQualGrade2" CssClass="Emlabel"> Qualification Grade: </asp:Label><asp:TextBox ID="txtQualGrade2" runat="server" CssClass="Eminput" />
   <br />
   <br />
   <asp:Label runat="server" ID="lblQualSubject3" AssociatedControlID="ddlQualSubject3" CssClass="Emlabel"> Qualification Subject/Code: </asp:Label><asp:DropDownList ID="ddlQualSubject3" runat="server" CssClass="Eminput"/>
   <br />
   <asp:Label runat="server" ID="lblQualYear3" AssociatedControlID="txtQualYear3" CssClass="Emlabel"> Qualification Year: </asp:Label><asp:TextBox ID="txtQualYear3" runat="server" CssClass="Eminput" />
   <br />
   <asp:Label runat="server" ID="lblQualGrade3" AssociatedControlID="txtQualGrade3" CssClass="Emlabel"> Qualification Grade: </asp:Label><asp:TextBox ID="txtQualGrade3" runat="server" CssClass="Eminput" />
   <br />
   <br />
   <asp:Label runat="server" ID="lblQualSubject4" AssociatedControlID="ddlQualSubject4" CssClass="Emlabel"> Qualification Subject/Code: </asp:Label><asp:DropDownList ID="ddlQualSubject4" runat="server" CssClass="Eminput"/>
   <br />
   <asp:Label runat="server" ID="lblQualYear4" AssociatedControlID="txtQualYear4" CssClass="Emlabel"> Qualification Year: </asp:Label><asp:TextBox ID="txtQualYear4" runat="server" CssClass="Eminput" />
   <br />
   <asp:Label runat="server" ID="lblQualGrade4" AssociatedControlID="txtQualGrade4" CssClass="Emlabel"> Qualification Grade: </asp:Label><asp:TextBox ID="txtQualGrade4" runat="server" CssClass="Eminput" />
   <br />
</div>

如有任何建议，我们将不胜感激

Answer 1

您可以添加 Css 样式属性 display:none 并在单击按钮后将其删除

Answer 2

也许Bootstrap崩溃是你的选择：

https://getbootstrap.com/docs/4.0/components/collapse/

您可以使用它来 show/hide 可选。

hide/reveal 输入字段 asp

hide/reveal input fields asp

javascript

asp.net

hide