Collapse ListView Item on Mouse Hover using jQuery in ASP.Net

Hi nauna,

Refer below sample.

HTML

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<script type="text/javascript">
    $(function () {
        $('[id*=lnk]').hover(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);
            }
            return false;
        });
    });
</script>
<div>
    <asp:ListView ID="lvCustomers" runat="server" GroupPlaceholderID="groupPlaceHolder1"
        ItemPlaceholderID="itemPlaceHolder1">
        <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.Data.SqlClient;
using System.Data;
using System.Configuration;

VB.Net

Imports System.Data.SqlClient
Imports System.Data

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();
                }
            }
        }
    }
}

VB.Net

Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs) Handles Me.Load
    If Not Me.IsPostBack Then
        Using con As SqlConnection = New SqlConnection(ConfigurationManager.ConnectionStrings("constr").ConnectionString)
            Using cmd As SqlCommand = New SqlCommand("SELECT CustomerId,Name FROM Customers", con)
                Using da As SqlDataAdapter = New SqlDataAdapter(cmd)
                    Dim dt As DataTable = New DataTable()
                    da.Fill(dt)
                    lvCustomers.DataSource = dt
                    lvCustomers.DataBind()
                End Using
            End Using
        End Using
    End If
End Sub

Screenshot