The TabPanel has a built-in panel that shows the content of the selected tab. In some cases, you may want to display the content in a different element.

To do that, hide the built-in content element and use the OnClientSelectedIndexChanged event to update the content.

Africa America Asia Europe Oceania

Content for tab Africa...

// This file locates: "Scripts/Lesson/C1Nav/TabPanelDetachedPanels.js".
c1.documentReady(function () {
    var tabDetached = wijmo.Control.getControl('#tabDetached');
 
    // hide the built-in content area
    tabDetached.hostElement.querySelector('.wj-tabpanes').style.display = 'none';
 
    tabDetached_selectedIndexChanged(tabDetached);
});
 
function tabDetached_selectedIndexChanged(s, e) {
    var div = document.getElementById('detachedContent');
    div.innerHTML = 'Content for tab <b>' +
        s.selectedTab.header.textContent +
        '</b>...';
}

using System.Web.Mvc;
 
namespace LearnMvcClient.Controllers
{
    public partial class C1NavController : Controller
    {
        // GET: Adding
        public ActionResult TabPanelDetachedPanels()
        {
            return View();
        }
    }
}

<h1>
    @Html.Raw(Resources.C1Nav.TabPanelDetachedPanels_Title)
</h1>
<p>
    @Html.Raw(Resources.C1Nav.TabPanelDetachedPanels_Text1)
</p>
<p>
    @Html.Raw(Resources.C1Nav.TabPanelDetachedPanels_Text2)
</p>
 
<div id="tabDetached">
    <!-- tab without any content -->
    <div>
        <a>Africa</a>
        <div></div>
    </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>
@Html.C1().TabPanel("#tabDetached").OnClientSelectedIndexChanged("tabDetached_selectedIndexChanged")
<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>