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

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" >Personal Information</button>
    <div >
        <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  id="accordionExample">
  <div >
    <div  id="headingOne">
      <h2 >
        <button  type="button" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
          Collapsible Group Item #1
        </button>
      </h2>
    </div>

    <div id="collapseOne"  aria-labelledby="headingOne" data-parent="#accordionExample">
      <div >
          <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>

CodePudding user response：

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!