<div class="title">Tabs Component</div>
<div id="tabs">
  <div class="tab type1" data-type="1">Tab 1</div>
  <div class="tab type2" data-type="2">Tab 2</div>
  <div class="tab type3" data-type="3">Tab 3</div>
</div>
<div id="content" class="type1">
  <div class="item sticky">Sticky</div>
  <div class="item sticky">Sticky</div>
  <div class="item sticky">Sticky</div>
  <div class="item">Type 1</div>
  <div class="item">Type 1</div>
  <div class="item">Type 1</div>
  <div class="item">Type 1</div>
  <div class="item">Type 1</div>
  <div class="item">Type 1</div>
  <div class="item">Type 1</div>
  <div class="item">Type 1</div>
  <div class="item">Type 1</div>
  <div class="item">Type 1</div>
  <div class="item">Type 1</div>
  <div class="item">Type 1</div>
  <div class="item">Type 1</div>
  <div class="item">Type 1</div>
  <div class="item">Type 1</div>
  <div class="item">Type 1</div>
  <div class="item">Type 1</div>
  <div class="item">Type 1</div>
  <div class="item">Type 1</div>
  <div class="item">Type 1</div>
  <div class="item">Type 1</div>
  <div class="item">Type 1</div>
</div>

body { margin:0px; }

div { font-family:'Helvetica Neue', Helvetica, Arial; color:#fff; box-sizing: border-box; }

.title { color:#000; font-size:18px; text-align:center; padding:10px; }

#tabs:after,#content:after{display:table;content:" ";clear:both;}

.type1 { background-color:#428bca; }
.type2 { background-color:#5cb85c; }
.type3 { background-color:#d9534f; }

.tab { float:left; border-top-left-radius:6px; border-top-right-radius:6px; font-size:18px; padding:10px; width:33%; cursor:pointer; }
.tab.type2 { width:34%; }

.item { width:18%; margin:1%; height:60px; line-height:60px; border:1px solid black; float:left; text-align:center; }

#content.type1 .item { background-color:#3276b1; }
#content.type2 .item { background-color:#47a447; }
#content.type3 .item { background-color:#d2322d; }
#content .item.sticky { background-color:#ed9c28; }

/*
ATTENTION:
Highly contrived code to force a memory leak.
If you're writing code like this, you're DOING IT WRONG.
*/

$(function() {
  var tabs = $('.tab');
  var content = $('#content');
  var items = content.find('.item');
  tabs.bind('click', function() {
    var selectedTab = $(this);
    var selectedType = selectedTab.data('type');
    content.removeClass();
    content.addClass('type'+selectedType);
    
    items = items.filter('.sticky');
    content.empty();
    fakeAjax(selectedType).done(function(titles) {
      $.each(titles, function(ix, title) {
        items = items.add($('<div class="item">'+title+'</div>'));
      });
      content.append(items);
    });
  });
  
  function fakeAjax(type) {
    var titles = [];
    for(var i=0; i<22; i++) {
      titles.push('Type '+type);
    }
    return $.when(titles);
  }
});