How do I use ASP.NET HTML within collapsible elements? - asp.net

Question

I've spent the past few days attempting to get collapsible elements on a webform I'm building in Visual Studio with ASP.NET HTML and C#. I'm having two issues with this. I either A) get the collapsible button and animations to show up, but not hide/unhide elements (see first code snippet), or B) get the hide/unhide function to work, but the labels and text boxes only hide themselves for a second, then reappear in between other elements. I've tried wrapping them with containers and still haven't been able to solve the issue.
I will eventually need to store this data and push it to a server, but I first need to get this working.
Does anyone have any pointers?
<button type="button" class="collapsible">Personal Information</button>
<div class="body-content">
<container>
<asp:Label ID="lbl_firstName" runat="server" Text="First Name: "></asp:Label>
<asp:TextBox ID="box_firstName" runat="server"></asp:TextBox>
</container>
<br />
<asp:Label ID="lbl_lastName" runat="server" Text="Last Name: "></asp:Label>
<asp:TextBox ID="box_lastName" runat="server"></asp:TextBox>
<br />
<asp:Label ID="lbl_email" runat="server" Text="Email: "></asp:Label>
<asp:TextBox ID="box_email" runat="server"></asp:TextBox>
<br />
<asp:Label ID="lbl_phone" runat="server" Text="Phone: "></asp:Label>
<asp:TextBox ID="box_phone" runat="server"></asp:TextBox>
<br />
</div>
<!-- STYLE -->
<style>
.collapsible {
background-color: #777;
color: white;
cursor: pointer;
padding: 18px;
width: 100%;
border: none;
text-align: left;
outline: none;
font-size: 15px;
}
.active, .collapsible:hover {
background-color: #555;
}
.collapsible:after {
content: '\002B';
color: white;
font-weight: bold;
float: right;
margin-left: 5px;
}
.active:after {
content: "\2212";
}
.content {
padding: 0 18px;
max-height: 0;
overflow: hidden;
transition: max-height 0.2s ease-out;
background-color: #f1f1f1;
}
</style>
<!-- SCRIPT -->
<script>
var coll = document.getElementsByClassName("collapsible");
var i;
for (i = 0; i < coll.length; i++) {
coll[i].addEventListener("click", function () {
this.classList.toggle("active");
var content = this.nextElementSibling;
if (content.style.maxHeight) {
content.style.maxHeight = null;
} else {
content.style.maxHeight = content.scrollHeight + "px";
}
});
}
</script>
<style>
.accordion {
background-color: #777;
color: white;
cursor: pointer;
padding: 18px;
width: 100%;
border: none;
text-align: left;
outline: none;
font-size: 15px;
}
.active, .collapsible:hover {
background-color: #555;
}
.content {
padding: 0 18px;
max-height: 0;
overflow: hidden;
transition: max-height 0.2s ease-out;
background-color: #f1f1f1;
}
</style>
<script>
var coll = document.getElementsByClassName("accordion");
var i;
for (i = 0; i < coll.length; i++) {
coll[i].addEventListener("click", function() {
this.classList.toggle("active");
var content = this.nextElementSibling;
if (content.style.maxHeight){
content.style.maxHeight = null;
} else {
content.style.maxHeight = content.scrollHeight + "px";
}
});
}
</script>
<div class="accordion" id="accordionExample">
<div class="card">
<div class="card-header" id="headingOne">
<h2 class="mb-0">
<button class="btn btn-link" type="button" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
Collapsible Group Item #1
</button>
</h2>
</div>
<div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordionExample">
<div class="card-body">
<container>
<label for="fname">First Name:</label>
<input type="text" id="fname" name="fname"><br><br>
<label for="lname">Last name:</label>
<input type="text" id="lname" name="lname"><br><br>
</container>
</div>
</div>
</div>

Answer 1

A solution when testing this that worked for me was in your second option.
Changing the data-toggle and data-parent to data-bs-toggle and data-bs-parent respectively. You will also need to add href="#collapseOne" to your button element.
Hope this helps!