Automatically adjusts to detect whether scrolling is needed, ideal for responsive interfaces. One of the greatest features for jQuery ScrollTabs is that you can have different right-and-left side styling depending on if scrolling is required. Here you can see that there are rounded corners for the right and left sides when it is not wide enough to scroll, however when scrolling there are right and left arrows accordingly.

ScrollTabs automatically adjusts when you add more items. There's a simple Javascript API for adding and removing items.

Add Item

HTML:

        <div id="tabSet" class="scroll_tabs_theme_light">
          <span>First Item</span>
        </div>

JavaScript:

        tabSet = $('#tabSet').scrollTabs();
        tabSet.addTab('<span>Added Item</span>');

ScrollTabs will also handle standard list syntax for greater compatibility with existing lists or other plugins.

• First Item
• Second Item

Add Item

HTML:

        <ul id="tabSet" class="scroll_tabs_theme_light">
          <li>First Item</li>
          <li>Second Item</li>
        </ul>

JavaScript:

        tabSet = $('#tabSet').scrollTabs();
        tabSet.addTab('<li>Added Item</li>');

Basic initialization, without any theme or custom CSS applied. Previous examples used the "light" theme: scroll_tabs_theme_light.

Remove First Item

This is an example with the "dark" theme applied. To apply this theme, simply append the class scroll_tabs_theme_dark to the container div element.

Remove First Item

HTML:

        <div id="tabSet" class="scroll_tabs_theme_dark">
          <span>First Tab</span>
          <!-- ... A Bunch of other Tabs ... -->
        </div>

Custom Background Images

Beyond using simple CSS to style your tabbed interface, you could also make use of background images. This can allow you to provide more unique styling without sacrificing browser compatibility (in some cases). Below is an example of a custom style for a dark-gray themed toolbar. Use the button to remove some tabs in order to see how it appears without the scrolling arrows.

Remove First Item

Here is the Custom CSS that provides for the above example:

        /****** NOTE: .style1 is the class of our DOM object we've applied scrollTabs() to *******/

        /* Set the content of the arrows to nothing, we will use a background image of our own. */
        .style1 .scroll_tab_left_button::before {
          content: "";
          padding: 0px;
        }

        .style1 .scroll_tab_right_button::before {
          content: "";
          padding: 0px;
        }

        /* Set up our background image (i.e. toolbar for example) behind the tab-set */
        .style1 div.scroll_tab_inner {
          height: 40px;
          background: url(../images/toolbar-bg.jpg) repeat-x;
        }

        /* Setup the appearance of each individual TAB */
        .style1 div.scroll_tab_inner span {
          padding-left: 20px;
          padding-right: 20px;
          line-height: 40px;
          font-size: 14px;
          background: transparent url(../images/scroll_tab_bg.jpg) no-repeat -25px -40px;
          color: #FFFFFF;
          cursor: pointer;
        }

        /* Style the FIRST tab differently from the rest, inherits from above */
        .style1 div.scroll_tab_inner span.scroll_tab_first {
          background: transparent url(../images/scroll_tab_bg.jpg) no-repeat -40px -40px;
        }

        /* Style the hover state for each tab */
        .style1 div.scroll_tab_inner span.scroll_tab_over {
          background: transparent url(../images/scroll_tab_bg.jpg) no-repeat -25px 0px !important;
        }

        /* Style the hover state for the first tab (Using MULTI-CLASS selectors may not work right in older browsers) */
        .style1 div.scroll_tab_inner span.scroll_tab_first.scroll_tab_over {
          background: transparent url(../images/scroll_tab_bg.jpg) no-repeat -40px 0px !important;
        }

        /* Style the left of the tab set if the arrows are hidden (the are is wide enough to show ALL the tabs */
        .style1 div.scroll_tab_inner span.scroll_tab_left_finisher {
          padding: 0px;
          width: 10px;
          background: transparent url(../images/scroll_tab_bg.jpg) no-repeat 0px -160px;
        }

        /* AND HOVER STATE */
        .style1 div.scroll_tab_inner span.scroll_tab_left_finisher.scroll_tab_over {
          background-position: 0px -120px !important;
        }

        /* AND SELECTED STATE */
        .style1 div.scroll_tab_inner span.scroll_tab_left_finisher.tab_selected {
          background-position: 0px -200px;
        }

        /* Style the right of the tab set if the arrows are hidden (the are is wide enough to show ALL the tabs */
        .style1 div.scroll_tab_inner span.scroll_tab_right_finisher {
          padding: 0px;
          width: 10px;
          background: transparent url(../images/scroll_tab_bg.jpg) no-repeat right -160px;
        }

        /* AND HOVER STATE */
        .style1div.scroll_tab_inner span.scroll_tab_right_finisher.scroll_tab_over {
          background-position: right -120px !important;
        }
        
        /* AND SELECTED STATE */
        .style1div.scroll_tab_inner span.scroll_tab_right_finisher.tab_selected {
          background-position: right -200px;
        }

        /* Style left scrolling button */
        .style1 .scroll_tab_left_button {
          height: 40px;
          background: transparent url(../images/scroll_tab_bg.jpg) no-repeat 0px -40px;
        }

        /* Style left scrolling button HOVER */
        .style1 .scroll_tab_left_button.scroll_arrow_over {
          background: transparent url(../images/scroll_tab_bg.jpg) no-repeat 0px 0px;
        }

        /* Style left scrolling button DISABLED */
        .style1 .scroll_tab_left_button.scroll_arrow_disabled {
          background: transparent url(../images/scroll_tab_bg.jpg) no-repeat 0px -80px;
        }

        /* Style right scrolling button */
        .style1 .scroll_tab_right_button {
          height: 40px;
          background: transparent url(../images/scroll_tab_bg.jpg) no-repeat -474px -40px;
        }

        /* Style right scrolling button HOVER */
        .style1 .scroll_tab_right_button.scroll_arrow_over {
          background: transparent url(../images/scroll_tab_bg.jpg) no-repeat -474px 0px;
        }

        /* Style right scrolling button DISABLED */
        .style1 .scroll_tab_right_button.scroll_arrow_disabled{
          background: transparent url(../images/scroll_tab_bg.jpg) no-repeat -474px -80px;
        }

        /* Style SELECTED (depressed) tab */
        .style1 div.scroll_tab_inner span.tab_selected {
          background: transparent url(../images/scroll_tab_bg.jpg) no-repeat -25px -80px;
        }

        /* Style SELECTED (depressed) if it's the FIRST tab */
        .style1 div.scroll_tab_inner span.tab_selected.scroll_tab_first {
          background-position: -40px -200px;
        }