Responsive Tabs - Mobile-friendly jQuery Tabs Plugin

Responsive Tabs is the advanced version of the Menucool Tabbed Content. It used to be a jQuery tabs plugin (McTabs). The script has been rewritten with plain JavaScript that does not require the jQuery library anymore.

Key Features

If the target of a bookmark link (e.g. the target <p id="b2">...</p> of the bookmark <a href="#b2">see details</a>) is inside a tab content panel, clicking the bookmark will open the tab content panel, and scroll the page to the target (see Bookmark Link for details).

Similarly, launching a page and the page URL contains a hash, and the target element of the hash value is inside a tab content panel (or the target is the panel itself), launching the page will open the tab content panel, and the page will scroll to the target.

Normal tab links (href="#abc") point semantically to target;

Ajax tabs link directly to their Ajax content page, which is completely the Hijax approach that enables crawlers see what users see.

Load content from another page/document that can be any web page (html), xml or json document. See Ajax Tabs for details.

View
Demos
    or     Download
demos & source code v2019.7.12



Templates:    1   2   3   4  

  1. Download the source code, put the responsive-tabs.js and one template folder into your web application.
  2. Insert viewport meta, script link, and CSS stylesheet link into the head section of your page:

    <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link href="tabs/template1/responsivetabs.css" rel="stylesheet" type="text/css" /> <script src="tabs/responsive-tabs.js" type="text/javascript"></script>

    The breakpoint of switching tabs layouts for different devices is set through media queries in the stylesheet. The viewport meta tag in the code above is necessary for mobile devices to understand the media queries.

    The Responsive Tabs jQuery version has been decommissioned.
  3. HTML:

    Add tabs and contents to your page:

    <ul class="rtabs"> <li><a href="#view1">Features</a></li> <li><a href="#view2">How to Use</a></li> <li><a href="#view3">Source Code</a></li> </ul> <div class="panel-container"> <div id="view1"> content 1 </div> <div id="view2"> content 2 </div> <div id="view3"> content 3 </div> </div>

    Note: If you have Ajax Tabs that will load content from external pages/documents, please visit Ajax Tabs for details.

  4. Customize the script:

    Open the script responsive-tabs.js with Notepad, and edit it to your desired settings:

    var rtabsGlobalOptions = { event: "click", //"click", or "mouseover" autoAdvance: 0, //seconds. 0 means no autoAdvance animate: 5, //seconds. set to 0 if no transitional effect is required license: "mylicense" };
    event:

    "click" or "mouseover".

    "click": selecting a tab by mouse click;
    "mouseover": selecting a tab by mouse over.

    autoAdvance:

    Decimal number specifying the interval in seconds for auto advance. Setting its value to 0 will disable the auto advance.

    The auto advance, if set, will pause when the mouse is hovering over the content panel.

    animate:

    Decimal number specifying the transition duration in seconds when swapping content panels. The animation uses the CSS3 transition.

    Set it to 0 (zero) if no transitional effect is required.

    license:

    Place to set your license. Please refer to the License section for details.

    Overriding the global options

    If you have multiple Responsive Tabs on the page, and you want each to have different options, you can directly add data-options attribute to the tabs’ root elemet, UL, to specify the specific options that will override the rtabsGlobalOptions.

    Example:
    <ul class="rtabs" data-options="{event: 'mouseover'}"> ... </ul>
  5. Install License:

    License Fee: $20.00
    About License

  • Configure the Options

    See the Customize the script under the Installation tab

  • Ajax Tab

    Visit Ajax Tabs - Fetch external content via Ajax for details

  • Multiple Responsive Tabs on the Same Page

    You can have multiple Responsive Tabs in one page, and they can be nested.

  • Other Ways to Select a Tab

    <a href="#b2">navigate to #b2</a>
    navigate to #b2

    • The bookmark link can be placed anywhere on the page
    • The bookmark hash id ("b2" in this example) can be either a target content panel id, or any element id within a tabbed content panel.
    • The browser will also scroll to the target element after clicking the bookmark link.
    It will open and scroll to the <p id="b2"> . . . </p> element under the URL Hash tab.

    If we navigate to a page, and the page URL contains a hash that happens to be a tab content panel id or an element id that is within a tab content panel, the navigation to the page will select the corresponding tab, and the browser will scroll to the element.

    Element <p id="b2">...</p>

  • Default Tab

    Usually the first tab will be selected by default when the page is lauched.

    If you want other tabs to be selected by default, just declare class="selected" to the LI element of the tab:

    <li class="selected">Tab 3</li>
  • Create jQuery Tabs Dynamically

    Responsive Tabs provides a built-in function, init(), that will initiate the Responsive Tabs instance at any time. This makes it possible to create jQuery Tabs at later time after page load. For example, at runtime, when the data required for creating/updating the tabs is ready, you can instantiate the tabs instance by calling the function: tabbers.init();

    For details please check out the demo 4 code in the download package.

    Limitations:
    The tabbers.init() can only be called after page load, and there is no <ul class="rtabs">...</ul> element at the time of page load.
  • onTabSelected Event Handler

    onTabSelected event handler is a function that will be called by each tab selecting event. It provides a way to perform additional tasks when a tab is selected.

    The handler function has two passed in parameters: the selected tab, and the content panel id.

    For example (excerpt from the demo 4 in the download package):

    function onTabSelected(tab, panelId) { var span1 = document.getElementById("span1"); span1.innerHTML = "Selected tab: " + tab.innerHTML + ", Selected panel: " + panelId; }

License Fee: $20.00

  • License is required for using the Responsive Tabs widget. Without a valid license, the Responsive Tabs may periodically show a trial version reminder in the tabs.
  • Under local development environment (localhost server or local file path), you can use the license "6580t" to disable the reminder.
  • The license is issued on a per-domain basis (valid for a domain and its sub-domains). Intranet domains and IP domains should also be licensed.
  • You can use the licensed widget multiple times within the website for which you've purchased the license.
  • When you have acquired the license, open the responsive-tabs.js file with Notepad, and update the license value accordingly. var rtabsGlobalOptions= { . . . . . . license: "mylicense" };

FAQ about License

  1. How the license works? Does it go to another web service to verify? Answer
  2. Do I need a license for my dev and testing domain that is different from the final client's domain? Answer
  3. Will it work for sub-domains? Answer
  4. My website is on intranet. Do I need license for using your widgets in my intranet website? Answer
  5. Do you provide developer license that can be applied to multiple websites? Answer
  6. I have multiple domain names pointing to the same website. Can I apply multiple licenses to the same script? Answer
  7. Do I need to renew the license for future upgrades/releases of the widget? Answer
You need to set the acquired license key to the license property in the widget's JavaScript file.

The JavaScript will use its own match pattern code to verify the license with the domain name on the browser's address bar. The JavaScript file will perform the validation by itself and no other services will be involved.

If the validation failed(the domain name doesn't match the license key), the UI component may periodically display a trial version alert, or even disable some functionalities.

The code is fully functional even if the script is not licensed (though it may periodically show a trial version alert). So usually you don't need the license in your dev phase.

If you are developing under the domain localhost, either the trial version alert will be disabled, or we have provided a license for the localhost that you can find in the License section of the product's main page.

Yes. If the license is valid for the main domain, it will also be valid for all its sub-domains(such as sub1.mydomain.com, sub2.mydomain.com).
Yes license is required for intranet domains, and you can enter your intranet domain into the For website box after clicking the Buy Now button.
No. It is on a per-domain basis only.
Yes, it is supported. The following links are the instructions:

For JS Image Slider     For Ninja Slider     For ddmenu     For JS Tooltip

Note:
  • If your domain2.com will be redirected to your domain1.com, you only need a license for domain1.com. You don't need multiple licenses in this scenario.
  • If your multiple domains are obviously for the same site, such as menucool.com, menucool.net, menucool.com.us, you can input the regular price for the first domain, and input 1/2 of the price for the others.

No. The license will be valid forever as long as your domain is not changed.

If your domain name is changed, you need to purchase a separate license for the new domain.


 

Your Name
+ =  

Question Title

If your question is about troubleshooting, please first go through the checking list in Troubleshooting Request.