Small component to enable tabbing pages with Bootstrap 4 cards (or some other paging elements).
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
README.md
tabPages.js
test.html

README.md

TabPages

Small component to enable tabbing pages with Bootstrap 4 cards (or some other paging elements).

Small Demo: http://vandango.org/github/tabPagesDemo/

HTML

<div class="card text-center" data-tabs="myTabPage">
  <div class="card-header">
    <ul class="nav nav-tabs card-header-tabs">
      <li class="nav-item"><a class="nav-link" href="#" data-tab-page="page1">Page 1</a></li>
      <li class="nav-item"><a class="nav-link" href="#" data-tab-page="page2">Page 2</a></li>
      <li class="nav-item"><a class="nav-link" href="#" data-tab-page="page3">Page 3</a></li>
    </ul>
  </div>
  <div class="card-block" data-tab-page="page1">
    <h4 class="card-title">Special title treatment 1</h4>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
  <div class="card-block" data-tab-page="page2">
    <h4 class="card-title">Special title treatment 2</h4>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
  <div class="card-block" data-tab-page="page3">
    <h4 class="card-title">Special title treatment 3</h4>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

JavaScript Call

$(function() {
  // basic initialization, without object possible
  TabPages.init('myTabPage');

  // to pre-select you need the object itself
  var tab = TabPages.init('myTabPage');
  tab.selectTab('page3');
  
  // or do it the classic way
  var myTabElement = new TabPages('myTabPage');
  myTabElement.initTabs();
  myTabElement.selectTab('page3');
});