Sometimes, the context of our tabs widget has important theme implications. The default visual components of the tabs widget work best when the widget is near the top of the document, that is, the majority of the page content is nested within the tab panels. In contrast, there may be preexisting page elements that could benefit from being organized by a tabs widget. And therein lies the challenge—stuffing a top-level widget such as tabs into a smaller block can look awkward at best, unless we can figure out a way to strip down some unnecessary theme components from the tabs.

<div id="tabs-container">
    <div id="tabs">
        <ul>
            <li><a href="#tab1">Tab 1</a></li>
            <li><a href="#tab2">Tab 2</a></li>
            <li><a href="#tab3">Tab...