Ausblenden und Anzeigen von Formular (Panel) onclick

Question

Ich habe ein Webformular in C# asp.net, das Hinzufügen von Daten zur Datenbank enthält. Benutzer hat die Option "ein anderes Produkt hinzufügen" oder "Kasse".

Wenn der Benutzer auf "ein anderes Produkt hinzufügen" klickt, sollte das aktuelle Formular ausgeblendet und ein neues Formular geöffnet werden, das ihm ein weiteres Produkt hinzufügen soll. Wenn er auf die Kasse klickt, sollte er ihn zur Kasse weiterleiten. Nun, der letzte Schritt ist kein Problem.

Wenn möglich, möchte ich Form in einer Art von Akkordeon verstecken, und neue so anzeigen. Wenn nicht, nur ein normales ausblenden und zeigen. Außerdem sollte die Seite nicht neu geladen werden und Daten verlieren.

Bisher, was ich versucht habe:

rotected void btnAddNewProduct_Click(object sender, EventArgs e) 
    { 
     form1.Visible = false; 
    } 

Zweite Option:

$(document).ready(function() { 
function HideElement() 
{ 
    document.getElementById("form1").style.display = "none"; 
} 
}); 

<asp:Button ID="btnAddNewProduct" runat="server" class="form-control" Text="Add procut" OnClientClick="btnAddNewProduct_Click"/><br /> 

Auch versucht inputing:

<div class="accordion"> 
<form id="form1" runat="server"> 
</form> 
</div> 

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes /base/jquery-ui.css"> 
<link rel="stylesheet" href="/resources/demos/style.css"> 
<script src="https://code.jquery.com/jquery-1.12.4.js"></script> 
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> 
<script> 
$(function() { 
$("#accordion").accordion(); 
    }); 
    </script> 

Aber es scheint nicht zu funktionieren.

Irgendwelche Hilfe? Ich wäre wirklich glücklich, wenn ich es mit Akkordeon tun könnte

Vielen Dank!

Answer 1

Wenn es dich um eine Client-Seite Operation ist die ASP-Kontrollen vergessen und normale Web-Kontrollen mit dem JQuery verwenden:

<button id="btnAddNewProduct">Add new</button> 
<script> 
    $(document).ready(function(){ 
     $("#btnAddNewProduct").click(function(){ 
      $("#accordion").accordion(); 
     }) 
    }); 
</script>