Detached Panels in TabPanel

The TabPanel has a built-in panel that displays the content of the selected tab. However, to display the content in a different element, you can hide the built-in content element and use the selectedIndexChanged event to update the content.

HTML

  <div id="theTabPanel">
    <div>
      <a>Africa</a>
      <div></div> <!-- no content -->
    </div>
    <div>
      <a>America</a>
      <div></div>
    </div>
    <div>
      <a>Asia</a>
      <div></div>
    </div>
    <div>
      <a>Europe</a>
      <div></div>
    </div>
    <div>
      <a>Oceania</a>
      <div></div>
    </div>
  </div>
  <p></p>
  <div class="panel panel-success">
    <!-- separate div to show the content -->
    <div class="panel-heading">
      <h3 id="detachedContent" class="panel-title"></h3>
    </div>
  </div>

Javascript

import * as wjNav from '@mescius/wijmo.nav';

function init() {
    var theTabPanel = new wjNav.TabPanel('#theTabPanel', {
        // show the content for the selected tab in a separate div
        selectedIndexChanged: function (s, e) {
            var div = document.getElementById('detachedContent');
            div.innerHTML = 'Content for tab <b>' +
                s.selectedTab.header.textContent +
                '</b>...';
        }
    });
    // hide the built-in content area
    theTabPanel.hostElement.querySelector('.wj-tabpanes').style.display = 'none';
}