Collapse Expand Bootstrap panel inside ListView using jQuery in ASP.Net

Hi nauna,

Please refer below sample.

HTML

<script type="text/javascript">
    $(function () {
        $('[id*=lnk]').on('click', function () {
            var id = $(this).next('div').find('[id*=HiddenField2]').val();
            if ($(this).next('div').attr('class') == "collapse in") {
                $(this).next('div').removeClass('collapse in');
                $(this).next('div').addClass('collapse out');
            }
            else {
                $(this).next('div').removeClass('collapse out');
                $(this).next('div').addClass('collapse in');
            }
            var oldURL = window.location.protocol + "//" + window.location.host + window.location.pathname;
            var newUrl = oldURL + "?Id=" + id;
            if (window.history != 'undefined' && window.history.pushState != 'undefined') {
                window.history.pushState({ path: newUrl }, '', newUrl);
                $("#<%=HiddenField1.ClientID %>").val(id);
            }
            return false;
        });
    });
</script>
<div>
    <asp:HiddenField ID="HiddenField1" runat="server" />
    <asp:ListView ID="lvCustomers" runat="server" GroupPlaceholderID="groupPlaceHolder1"
        ItemPlaceholderID="itemPlaceHolder1">
        <LayoutTemplate>
            <table cellpadding="0" cellspacing="0">
                <asp:PlaceHolder runat="server" ID="groupPlaceHolder1"></asp:PlaceHolder>
            </table>
        </LayoutTemplate>
        <GroupTemplate>
            <tr>
                <asp:PlaceHolder runat="server" ID="itemPlaceHolder1"></asp:PlaceHolder>
            </tr>
        </GroupTemplate>
        <ItemTemplate>
            <a class="btn btn-primary" role="button" id="lnk" data-toggle="collapse" href="#collapseExample<%#Container.DataItemIndex%>"
                aria-expanded="false" aria-controls="collapseExample">CustomerId </a>
            <div class="collapse in" id="#collapseExample<%#Container.DataItemIndex%>">
                <asp:Label ID="lblId" runat="server" Text='<%# Eval("Name") %>'></asp:Label>
                <asp:HiddenField ID="HiddenField2" runat="server" Value='<%# Eval("CustomerId") %>' />
            </div>
        </ItemTemplate>
    </asp:ListView>
</div>

Namespaces

C#

using System.Configuration;
using System.Data;
using System.Data.SqlClient;

Code

C#

protected void Page_Load(object sender, EventArgs e)
{
    if (!this.IsPostBack)
    {
        using (SqlConnection con = new SqlConnection(ConfigurationManager.ConnectionStrings["constr"].ConnectionString))
        {
            using (SqlCommand cmd = new SqlCommand("SELECT CustomerId,Name FROM Customers", con))
            {
                using (SqlDataAdapter da = new SqlDataAdapter(cmd))
                {
                    DataTable dt = new DataTable();
                    da.Fill(dt);
                    lvCustomers.DataSource = dt;
                    lvCustomers.DataBind();
                }
            }
        }
    }
}

Screenshot