Simplifying the tab theme

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.

How to do it...

Let's first create ourselves some markup to base the tabs widget on. It should look something like the following:

<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...