# Detached Panels

## Content



The TabPanel has a built-in panel that shows the content of the selected tab. However, in some cases, you may want to display the content in a different element. To implement this, simply hide the built-in content element and use the [SelectedIndex](/componentone/api/mvc/online-mvc-core/dotnet-api/C1.AspNetCore.Mvc/C1.Web.Mvc.TabPanel.SelectedIndex.html) property to update the content.

The following GIF image shows how TabPanel appears with detached panels.<br /><br />![](https://cdn.mescius.io/document-site-files/images/9b6a6cfe-b8e8-42e9-8a04-da6cb7762977/images/detachedpanel.gif)

The following code example demonstrates how to display tab content in a different html element.

```razor
<script>
    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>...';
    }
</script>
<c1-tab-panel id="tabDetached" selected-index-changed="tabDetached_selectedIndexChanged">
    <!-- 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>
</c1-tab-panel>
<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>
```