DataTables

DataTables Examples

HTML

<link rel="stylesheet" href="https://cdn.datatables.net/1.10.7/css/jquery.dataTables.css">
<script src="https://cdn.datatables.net/1.10.7/js/jquery.dataTables.js"></script>
<link rel="stylesheet" href="//cdn.datatables.net/fixedcolumns/3.0.4/css/dataTables.fixedColumns.css">
<script src="//cdn.datatables.net/fixedcolumns/3.0.4/js/dataTables.fixedColumns.min.js"></script>
<ul class="user-text">
  <li class="user-text">User 1 Text</li>
  <li class="user-text" style="display:none">User 2 text</li>
  <li class="user-text" style="display:none">User 3 text</li>
  <li class="user-text" style="display:none">User 4 text</li>
</ul>

<ul class="user">
  <li class="user">user 1 image</li>
  <li class="user">user 2 image</li>
  <li class="user">user 3 image</li>
  <li class="user">user 4 image</li>
</ul>

JavaScript

$('li.user' ).hover(function(){
  $('li.user-text:eq('+$(this).index()+')').show().siblings().hide();
})