fokz8 fokz8 - 9 days ago 7
Javascript Question

Hide and show form (panel) onclick

I have a webform in c# asp.net, which includes adding some data to database. User has option to "add another product" or "checkout".

If user clicks "add another product", current form should hide and open a new one, which should offer him to add another product. If he clicks checkout, it should redirect him to checkout. Well the last step is no problem.

If possible, i would like to hide form in a type of accordion, and display new one like that. If not, just a normal hide and show. Also the page shouldn't reload and loose data.

So far what i've tried:

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


Second 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 />


Also tried 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>


But it doesn't seem to work.

Any help? I would be really happy if i could do it using accordion

Thanks!

Answer

If it's a client side operation forget the ASP controls and use normal web controls with the JQuery:

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