How to toggle the refresh of another table element

Question

I am not sure how this is referred to, but I am trying to toggle the view within a table element. To analogize, say I have a table cell that displays two icons, one for displaying files by icon and a second icon for displaying files by list. When either of these icons are clicked, they should refresh another table cell accordingly. If anyone has an example or link to one, I would appreciate it.

Answer 1

You could add two lists to your page, and display one of them depending on which icon was clicked. By default, hide one of the lists. Example:

CSS:

.hide {
  display: none;
}

HTML:

<img src="icon-icon-view.png" id="icon_view_button" alt="icon view icon" />
<img src="icon-list-view.png" id="list_view_button" alt="list view icon" />

<div id="icon_view">put files with icon here</div>
<div id="list_view" class="hide">put files as list here</div>

jQuery:

$('#icon_view_button').click(function() {
  $('#icon_view').show();
  $('#list_view').hide();
});

$('#list_view_button').click(function() {
  $('#icon_view').hide();
  $('#list_view').show();
});

Live: http://jsfiddle.net/wUq7v/