coreFORCE - Website: Setting up a Tabbed Content DIV in coreFORCE

coreFORCE Advanced and Enterprise Only

There is now a simple way, in Coreware, to setup a tabbed content DIV. Tabbed content is where there is one DIV that displays content, with "file folder" tabs above it. Clicking a tab changes the content of the div. For example, this is used in many maintenance pages.

To set this up on ANY Coreware page is now very simple. You don't need to add any JavaScript code and CSS is not necessary (though you might want to add some for custom styling). 

There are many different potential purposes for these but here are a few of the possibilities that could be displayed:

Membership Levels
Subscription Products
Training Classes
Store Locations/Offerings
Feature Overviews or Highlights
Gear Rental Packages

Key Components: 

.tabbed-content - The outer div needs to have this class or else nothing else will work.

.tabbed-content-nav - The content of the outer div needs a UL object with this class.

.tabbed-content-tab - These are the list items within the UL nav. They need a data attribute specifying the div in the body that will be shown.

.tabbed-content-body - this is a wrapper around the "pages" of the tabbed content.

.tabbed-content-page - this is an individual page of the tabbed content. It needs an ID attribute that matches the data attribute of its corresponding tab, defined above.

.page-content - this is not necessary, but might help with your formatting within the tab section.

.tabbed-content-previous-page / .tabbed-content-next-page - Optional next and previous buttons for the section. These must be inside the .tabbed-content wrapper.

Additional Notes

Other classes (like active, current, visited, etc) are not needed on anything.

By default, the tabbed section will open with the FIRST tab selected. If you want it to open with a different tab selected, you can add the class "initial-active" to that tab.

The only classes used by the tabs are active, initial-active and visited. "visited" means that the panel has been displayed.

Example of Code in Use

<div id="_page_what_we_offer_content" class="tabbed-content">

    <ul class="tabbed-content-nav align-center" id="pricing_options">

        <li id="_page_products_tab" data-section_id="_page_products" class="tabbed-content-tab">Products</li>

        <li id="_page_services_tab" data-section_id="_page_services" class="tabbed-content-tab">Services</li>

        <li id="_page_training_tab" data-section_id="_page_training" class="tabbed-content-tab">Training</li>

    </ul>

    <div class="tabbed-content-body">

        <div id="_page_products" class="tabbed-content-page">

            <div id="_page_products_content" class="page-content">

                <h2>Products</h2>

                <img src="/getimage.php?code=products">

            </div>

        </div>

        <div id="_page_services" class="tabbed-content-page">

            <div id="_page_services_content" class="page-content">

                <h2>Services</h2>

                <img src="/getimage.php?code=services">

            </div>

        </div>

        <div id="_page_training" class="tabbed-content-page">

            <div id="_page_training_content" class="page-content">

                <h2>Training</h2>

                <h5>Train with us!</h5>

                <p>Learn more about the trainings we offer, click on any of the links below.</p>

                <ul>

                    <li><a href="#">Lesson 1</a></li>

                    <li><a href="#">Lesson 2</a></li>

                    <li><a href="#">Lesson 3</a></li>

                    <li><a href="#">Lesson 4</a></li>

                </ul>

            </div>

        </div>

    </div>

    <div class='tabbed-content-buttons'><button class='tabbed-content-previous-page'>Previous</button><button class='tabbed-content-next-page'>Next</button></div>

</div>

Example of What this might Look Like in Use




Example With Code

Updated on: 07/15/2024