Press "Enter" to skip to content

Responsive Accessible Tabs Plugin | jQuery Macaw Tabs

Macaw Tabs is a responsive, accessible, and easy-to-use jQuery plugin for creating a beautiful-looking tab user interface on a web page. Users can move between tabs using the arrow keys and view the corresponding tab panels by pressing Space or Enter.

responsive tabs to accordion, responsive tabs jquery, jquery responsive tabs example, easy responsive tabs, jquery ui tabs responsive

How to make use of it:

1. Download and embody the Macaw Tabs plugin’s files.

<link rel="stylesheet" href="./dist/css/macaw-elegant-tabs/macaw-elegant-tabs.css" />
<script src="/path/to/cdn/jquery.min.js"></script>
<script src="./dist/js/macaw-tabs.js"></script>

2. The required HTML structure for the tabs UI. Don’t overlook so as to add accessibility info to tabs & tab panels utilizing role and aria attributes:

<div class="macaw-tabs macaw-elegant-tabs">
  <div role="tablist" aria-label="Resources">
    <button role="tab" aria-selected="true" aria-controls="blog-tab" id="blog">
      <span class="label">Blog</span>
    </button>
    <button role="tab" aria-selected="false" aria-controls="events-tab" id="events" tabindex="-1">
      <span class="label">Events</span>
    </button>
    <button role="tab" aria-selected="false" aria-controls="deals-tab" id="deals" tabindex="-1">
      <span class="label">Deals</span>
    </button>
    <button role="tab" aria-selected="false" aria-controls="support-tab" id="support" tabindex="-1">
      <span class="label">Support</span>
    </button>
  </div>
  <div tabindex="0" role="tabpanel" aria-labelledby="blog" id="blog-tab">
    Tab Panel 1
  </div>
  <div tabindex="0" role="tabpanel" aria-labelledby="events" id="events-tab" hidden>
    Tab Panel 2
  </div>
  <div tabindex="0" role="tabpanel" aria-labelledby="deals" id="deals-tab" hidden>
    Tab Panel 3
  </div>
  <div tabindex="0" role="tabpanel" aria-labelledby="support" id="support-tab" hidden>
    Tab Panel 4
  </div>
</div>

3. Initialize the plugin to activate the tabs ui.

$(function(){
  $('.macaw-tabs').macawTabs();
});

4. Set the max display screen size at which level the plugin changes the format to ‘Vertical’.

$('.macaw-tabs').macawTabs({
  autoVerticalOrientation: true,
  autoVerticalOrientationMaxWidth: '575px',
});

5. Config the transition effect when navigating between tabs.

$('.macaw-tabs').macawTabs({
  tabPanelTransitionLogic: true,
  tabPanelTransitionClass: 'active',
  tabPanelTransitionTimeout: 0,
  tabPanelTransitionTimeoutDuration: 50,
});

6. Perform a callback function after the tabs have achieved.

$('.macaw-tabs').macawTabs({
  onTabActivation() {
    // do something
  },
});

Accessible Responsive Tabs Plugin, Macaw Tabs Plugin/Github


See Demo And Download

Official Website(htmlcssfreebies): Click Here

This superior jQuery/javascript plugin is developed by htmlcssfreebies. For extra advanced usage, please go to the official website.

Be First to Comment

    Leave a Reply

    Your email address will not be published.