Adding tabbed content to the Koha home page/Circulation home page/Reports home page

When I worked for the VALNet consortium we had a lot of content we needed to store somewhere easy for library staff to access.  There were some reports that were run monthly at various libraries and there were notices about school closures for the summer, and there were other things that seemed important to make available for staff.

The IntranetmainUserblock system preference seemed like a great place to store those things.  The problem was that we had so much content we wanted to share that, especially in the summer when the schools were closed, the Koha home page became about a mile tall.

One day I though, wouldn't it be cool to set that up as tabbed content.  School closures on one tab, reports on another, maybe a blog or calendar on a third.

This led to an investigation of tabbed content and I found a great, pre-built, tabbed content with only Java / CSS page template on GitHub.

The biggest modification I made to this code was to elements that the original author calls merely tab or tabs.  My fear is always that the next release of Koha will have an element with an ID called "tab" or "tabs" and that will screw up the operation of these pages.  Therefore in the IntranetmainUserblock the tabs are called mainxtabs, in IntranetCirculationHomeHTML they are called circxtabs, and in IntranetReportsHomeHTML they are called rptxtabs.

This is an example of this code written for IntranetCirculationHomeHTML with some added comments describing what the different lines are doing.

A second addition in this sample is that I have used inline CSS to hide Tabs 4 and 5.  What I have found is that 5 tabs on the screen for this space is enough.  If you put more tabs than that in a row in these areas, it's too much information, but the flip side of that is that I may not need 5 tabs all the time.  Rather than deleting the code that creates tabs 4 and 5 in this sample, I have them hidden so that all I have to do when I want to re-activate a tab is to remove the CSS.  This is particularly helpful when you want to show or hide a tab called "upcoming school closures" that you only need for a portion of the year.  Rather than deleting the content of that tab in the fall and recreating the tab again in the spring, hiding the tab takes it out of play

<!-- based on "Tabs pure javascript and css" by ShaunD2D at https://gist.github.com/Shaun2D2/6296191 -->

<style>

  ul#cirxtabs { list-style-type: none; margin: 30px 0 0 0; padding: 0 0 0.3em 0; }
    /*the above line controls the position of the tabs relative to the lines above them*/
  ul#cirxtabs li { display: inline; }
    /*the above line arranges the tabs horizontally across the top of the tabbed content*/
  ul#cirxtabs li a { color: #42454a; background-color: #dedbde; border: 1px solid #c9c3ba; border-bottom: none; padding: 0.3em; text-decoration: none; }
     /*the above line arranges controls the color of the tabs*/
  ul#cirxtabs li a:hover { background-color: #f1f0ee; }
    /*the above line changes the color of the selected tab and positions text on the tab*/
  ul#cirxtabs li a.selected { color: #000; background-color: #f1f0ee; font-weight: bold; padding: 0.7em 0.3em 0.38em 0.3em; }
    /*the above line controls the way that the content is positioned on the tab as well as the color of the tab*/
  div.cirxtabContent { border: 1px solid #c9c3ba; padding: 0.5em; background-color: #f1f0ee; }
  div.cirxtabContent.hide { display: none; }
    /*the above line hides the contents of the non-selected tabs*/

</style>

<script>

  var cirxtabLinks = new Array();
  var contentDivs = new Array();

  function init() {

    // Takes the content from the divs and puts them in the tabs
    var cirxtabListItems = document.getElementById('cirxtabs').childNodes;
    for ( var i = 0; i < cirxtabListItems.length; i++ ) {
      if ( cirxtabListItems[i].nodeName == "LI" ) {
        var cirxtabLink = getFirstChildWithTagName( cirxtabListItems[i], 'A' );
        var id = getHash( cirxtabLink.getAttribute('href') );
        cirxtabLinks[id] = cirxtabLink;
        contentDivs[id] = document.getElementById( id );
      }
    }

    // Tells the content what to do when the tabs are clicked
    // selects tab 1
    var i = 0;

    for ( var id in cirxtabLinks ) {
      cirxtabLinks[id].onclick = showcirxtab;
      cirxtabLinks[id].onfocus = function() { this.blur() };
      if ( i == 0 ) cirxtabLinks[id].className = 'selected';
      i++;
    }

    // Hide tabbed content except on tab 1
    var i = 0;

    for ( var id in contentDivs ) {
      if ( i != 0 ) contentDivs[id].className = 'cirxtabContent hide';
      i++;
    }
  }

  function showcirxtab() {
    var selectedId = getHash( this.getAttribute('href') );

    // Highlight the selected cirxtab, and dim all others.
    // Also show the selected content div, and hide all others.
    for ( var id in contentDivs ) {
      if ( id == selectedId ) {
        cirxtabLinks[id].className = 'selected';
        contentDivs[id].className = 'cirxtabContent';
      } else {
        cirxtabLinks[id].className = '';
        contentDivs[id].className = 'cirxtabContent hide';
      }
    }

    // Stop the browser following the link
    return false;
  }

  function getFirstChildWithTagName( element, tagName ) {
    for ( var i = 0; i < element.childNodes.length; i++ ) {
      if ( element.childNodes[i].nodeName == tagName ) return element.childNodes[i];
    }
  }

  function getHash( url ) {
    var hashPos = url.lastIndexOf ( '#' );
    return url.substring( hashPos + 1 );
  }

</script>

<body onload="init()">

<ul id="cirxtabs">
  <li><a href="#cirxtab01">Tab 01</a></li>
  <li><a href="#cirxtab02">Tab 02</a></li>
  <li><a href="#cirxtab03">Tab 03</a></li>
  <li style="display: none;"><a href="#cirxtab04">Tab 04</a></li>
  <li style="display: none;"><a href="#cirxtab05">Tab 05</a></li>
</ul>

<div class="cirxtabContent" id="cirxtab01">
  <h2>This is tab 01</h2>
  <div>
    <p>Tab 01 content goes here.</p>
  </div>
</div>

<div class="cirxtabContent" id="cirxtab02">
  <h2>This is tab 02</h2>
  <div>
    <p>Tab 02 content goes here.</p>
  </div>
</div>

<div class="cirxtabContent" id="cirxtab03">
  <h2>This is tab 03</h2>
  <div>
    <p>Tab 03 content goes here.</p>
  </div>
</div>

<div class="cirxtabContent" id="cirxtab04">
  <h2>This is tab 04</h2>
  <div>
    <p>Tab 04 content goes here.</p>
  </div>
</div>

<div class="cirxtabContent" id="cirxtab05">
  <h2>This is tab 05</h2>
  <div>
    <p>Tab 05 content goes here.</p>
  </div>
</div>