I'm having trouble with the Bootstrap Accordion ASP.net web forms. I can't keep it open after a postback.
The behavior I want is to open the page with the Accordian closed. Then, when the button cmdActivityTS is clicked, I want the Accordian to open. When content inside the Accordian is posted back (here by Button1), I want the Accordian to stay open so I can show some data inside. I want the Accordian to close again when cmdActivityTS is clicked.
I can almost do this by declarative adding .show to div collapseOne. But, the Accordion opens when the page opens. However, after that, it stays open after postbacks. So, I have been trying to achieve the same result by adding and removing classes in the script. No luck.
Here's my code. Thanks for your help. I've been working on this for a while.
'''
head runat="server">
<title>Test page</title>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<link rel="stylesheet" href="/Vendor/Admin.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#cmdActivityTS').click(function () {
var state = $('#hiddenfield').val();
if (state == 'collapse'){
$('#hiddenfield').val('show')
$('#collapseOne').addClass('show')
}
else {
$('#hiddenfield').val('collapse')
$('.collapseOne').removeClass('show')
}
var state = $("#hiddenfield").val();
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<asp:HiddenField ID="hiddenfield" runat="server" />
<div class="accordion" >
<div class="card mb-3">
<div class="card-header" id="headingOne" style="background-color:white;"">
<div class="mb-0">
<button type="button" id="cmdActivityTS" runat="server" class="btn btn-link collapsed " data-toggle="collapse" data-target="#collapseOne" aria-expanded="false" aria-controls="collapseOne">
<h5 style="color:steelblue">Show Data From Server</h5>
</button>
</div>
</div>
<div id="collapseOne" class="collapse" aria-labelledby="headingOne" data-parent="#accordion" enableviewstate="true">
<div class="card-body">
<div>
Aliquam dictum viverra dui ac euismod.
<div>
<asp:Button ID="Button1" runat="server" Text="Button" onclick="Button1_Click"/>
</div>
</div>
</div>
</div> <!-- collapseOne -->
</div> <!-- Card -->
</div> <!-- Accordian -->
'''
I didn't get any answers to my question so I developed a workaround. I used asp.net panels to fake an accordion. It's doesn't have smooth transitions like an accordion, but everything else works fine.
<div class="pb-3">
<div class="pt-4 pl-4 border border-bottom-0 rounded" style="background-color:white; height:70px; width:100%; color:dodgerblue">
<asp:LinkButton ID="OpenTS" onclick="openTs_Click" ForeColor="SteelBlue" runat="server"><h5>Recent Timesheet Activity</h5></asp:LinkButton>
</div>
<asp:Panel ID="tsPanel" runat="server">
<div class="card border-top-0">
<div class="card-body">
<p><uc1:WeekAtAGlance ID="tsActivity" runat="server" /></p>
</div>
</div>
</asp:Panel>
</div>
<div class="pb-3">
<div class="pt-4 pl-4 border border-bottom-0 rounded" style="background-color:white; height:70px; width:100%; color:steelblue">
<asp:LinkButton ID="OpenFin" onclick="openFin_Click" ForeColor="SteelBlue" runat="server"><h5>Recent Financial Activity</h5></asp:LinkButton>
</div>
<asp:Panel ID="finPanel" runat="server">
<div class="card border-top-0"">
<div class="card-body">
<p><uc1:WeekAtAGlance ID="finActivity" runat="server" /></p>
</div>
</div>
</asp:Panel>
</div>
Protected Sub openFin_Click(sender As Object, e As EventArgs) Handles OpenFin.Click
If finPanel.Visible = True Then
finPanel.Visible = False
Else
finPanel.Visible = True
End If
End Sub
Protected Sub openTs_Click(sender As Object, e As EventArgs) Handles OpenTS.Click
If tsPanel.Visible = True Then
tsPanel.Visible = False
Else
tsPanel.Visible = True
End If
End Sub