CODEWITHSUNDEEP
javascriptc#jqueryasp.netaccordion
aiden87
aiden87

Reputation: 969

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!

Upvotes: 0

Views: 1222

Answers (1)

Emad
Emad

Reputation: 3929

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>

Upvotes: 2

Related Questions