I want remain open jquery accordion tab after postback.
If i am submitting form then all tabes are collapsed i want to remain open after postback.
<script type="text/javascript">
function myAccordioin() {
$("[id$=accordion]").accordion({ active: 2 });
}
$(function () {
myAccordioin();
});
</script>
$.fn.accordion = function (duration) {
if (duration == null)
duration = 100;
this.find("[data-type='accordion-section']").each(function () {
var content = $(this).find("[data-type='accordion-section-body']");
var title = $(this).find("[data-type='accordion-section-title']");
title.addClass("header-default");
content.addClass("content-default");
//title.append("<i class='fa fa-plus-circle right'></i>")
title.append("<img id='imgdiv2' border='0' src='Images/chklistdown.jpg' style='float: right'>")
title.click(function () {
if (content.css("display") == "none") {
$("[data-type='accordion-section-title']").each(function () {
$(this).removeClass("header-active");
$(this).find("img").attr("src", "Images/chklistdown.jpg");
});
$(this).addClass("header-active");
$("[data-type='accordion-section-body']").each(function () {
$(this).hide(duration);
});
content.show(duration);
title.find("img").attr("src", "Images/chklistup.jpg");
} else {
content.hide(duration);
title.removeClass("header-active");
title.find("img").attr("src", "Images/chklistdown.jpg");
}
});
});
<section id="accordion">
<div data-type="accordion-section" class="accordionstyle">
<h4 data-type="accordion-section-title">Authorised Capital</h4>
<div class="accordion-content" data-type="accordion-section-body">
<table class="grey-themetrailbal tablecss">
<thead>
<tr style="color: White; background-color: #0076A8; border-color: Transparent; font-size: 14px; font-weight: bold; height: 32px;">
<td></td>
<td>Opening PY</td>
<td>Increase in PY</td>
<td>Opening CY</td>
<td>Increase in CY</td>
<td>Closing CY</td>
</tr>
</thead>
<tbody>
<tr>
<td>Number of Shares</td>
<td>
<asp:TextBox ID="txtOpening_PY_Share" onkeypress="return isNumberKey(event)" CssClass="RectangleText" runat="server" MaxLength="8"></asp:TextBox>
</td>
<td>
<asp:TextBox ID="txtIncrease_In_PY_Share" onkeypress="return isNumberKey(event)" CssClass="RectangleText" runat="server" MaxLength="8"></asp:TextBox></td>
<td>
<asp:TextBox ID="txtOpening_CY_Share" onkeypress="return isNumberKey(event)" CssClass="RectangleText" runat="server" MaxLength="8"></asp:TextBox></td>
<td>
<asp:TextBox ID="txtIncrease_In_CY_Share" onkeypress="return isNumberKey(event)" CssClass="RectangleText" runat="server" MaxLength="8"></asp:TextBox></td>
<td>
<asp:TextBox ID="txtClosing_CY_Share" onkeypress="return isNumberKey(event)" CssClass="RectangleText" runat="server" MaxLength="8"></asp:TextBox></td>
</tr>
<tr>
<td>Amount</td>
<td>
<asp:TextBox ID="txtOpening_PY_Amount" onkeypress="return isNumberKey(event)" CssClass="RectangleText" runat="server" MaxLength="8"></asp:TextBox>
</td>
<td>
<asp:TextBox ID="txtIncrease_In_PY_Amount" onkeypress="return isNumberKey(event)" CssClass="RectangleText" runat="server" MaxLength="8"></asp:TextBox></td>
<td>
<asp:TextBox ID="txtOpening_CY_Amount" onkeypress="return isNumberKey(event)" CssClass="RectangleText" runat="server" MaxLength="8"></asp:TextBox></td>
<td>
<asp:TextBox ID="txtIncrease_In_CY_Amount" onkeypress="return isNumberKey(event)" CssClass="RectangleText" runat="server" MaxLength="8"></asp:TextBox></td>
<td>
<asp:TextBox ID="txtClosing_CY_Amount" onkeypress="return isNumberKey(event)" CssClass="RectangleText" runat="server" MaxLength="8"></asp:TextBox></td>
</tr>
</tbody>
</table>
<div style="float: right">
<asp:Label ID="lblMessage1" Font-Bold="true" ForeColor="Green" runat="server"></asp:Label>
<asp:Button ID="btnSave" Text="Save" OnClick="btnSave_Click" CssClass="btn btn-outline-success" runat="server" />
<asp:Button ID="btnClear" Text="Cancel" OnClick="btnClear_Click" CssClass="btn btn-outline-info" runat="server" />
</div>
<br />
</div>
</div>
<div data-type="accordion-section" class="accordionstyle">
<h4 data-type="accordion-section-title">XYZ 1</h4>
<div class="accordion-content" data-type="accordion-section-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repudiandae veritatis odit laudantium. Cum illum repudiandae iure beatae laboriosam excepturi quia. Alias iure voluptate voluptatum, cumque unde blanditiis sunt rem dicta! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestias eligendi enim reprehenderit quasi minus! Quos consequuntur minus similique laboriosam rerum est dolorem, obcaecati, fugit voluptates quia, a reprehenderit quis magnam! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloremque ratione fugiat eveniet. Sed in voluptas aut corporis, inventore earum delectus eum aperiam doloribus, modi, expedita minus. Dolore reprehenderit, laborum perspiciatis. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur minus repellat totam quasi molestias obcaecati, qui ratione quibusdam beatae similique voluptatum suscipit harum doloribus eaque quidem doloremque rerum quia deserunt. </div>
</div>
<div data-type="accordion-section" class="accordionstyle">
<h4 data-type="accordion-section-title">XYZ 2</h4>
<div class="accordion-content" data-type="accordion-section-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repudiandae veritatis odit laudantium. Cum illum repudiandae iure beatae laboriosam excepturi quia. Alias iure voluptate voluptatum, cumque unde blanditiis sunt rem dicta! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestias eligendi enim reprehenderit quasi minus! Quos consequuntur minus similique laboriosam rerum est dolorem, obcaecati, fugit voluptates quia, a reprehenderit quis magnam! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloremque ratione fugiat eveniet. Sed in voluptas aut corporis, inventore earum delectus eum aperiam doloribus, modi, expedita minus. Dolore reprehenderit, laborum perspiciatis. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur minus repellat totam quasi molestias obcaecati, qui ratione quibusdam beatae similique voluptatum suscipit harum doloribus eaque quidem doloremque rerum quia deserunt. </div>
</div>
</section>
