Page History

<div class='tabs'>
<style>
DIV.tab_row {
    width: 100%;
}
DIV.tab_row > DIV {
    width: 150px;
    border: 1px solid #000000;
    border-bottom: 0px;
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
     
    color: #000000;
    background-color: #eeeeee;
    padding: 6px;
    margin-right: 10px;
     
    float: left;
    position: relative;
    top: 1px;
}
DIV.tab_panes {
    clear: both;
}
DIV.tab_panes > DIV {
    border: 1px solid #000000;
    padding: 4px;
}
DIV.tabs:after, DIV.tab_panes:after {
    content: " ";
    display: block;
    height: 0px;
    clear: both;
}
DIV.tab_row > DIV.tab_active {
  background-color: #ffffff;
  border-bottom: 1px solid #ffffff;
}
DIV.tab_row > DIV.tab_inactive {
  border-bottom: 1px solid #000000;
}
DIV.tab_panes > DIV.tab_inactive {
  display: none;
}
</style>
<script>
function tabActivate(rootnode, selectedindex) {
    function activatePane(panes, selectedindex) {
        for (var i=0; i < panes.length; i++) {
            var classname = panes[i].className.replace("tab_active","tab_inactive");
            panes[i].className = classname.replace("tab_inactive",
                i === selectedindex ? "tab_active" : "tab_inactive");
        }
    }
    activatePane(rootnode.querySelectorAll("div.tab_row > div"), selectedindex);
    activatePane(rootnode.querySelectorAll("div.tab_panes > div"), selectedindex);
    return false;
}
</script>
  <div class='tab_row'>
    {{for item in content}}
      <div onclick='return tabActivate(this.parentNode.parentNode,{{self.index}});' class='{{if self.index is self.first0}}tab_active{{else}}tab_inactive{{/if}}'>{{item.title}}</div>
    {{/for}}
  </div>
  <div class='tab_panes'>
    {{for item in content}}
      <div class='{{if self.index is self.first0}}tab_active{{else}}tab_inactive{{/if}}'>{{item.body}}</div>
    {{/for}}
  </div>
</div>