agencenous/jquery-tabs

Simply add tabs.

Installs: 623

Dependents: 0

Suggesters: 0

Security: 0

Stars: 0

Watchers: 2

Forks: 0

Open Issues: 0

Language:SCSS

Type:jquery-plugin

1.0.3 2023-03-03 08:58 UTC

This package is auto-updated.

Last update: 2024-10-16 23:09:10 UTC


README

Simply add tabs.

Install

composer require agencenous/jquery-tabs

Usage

<style rel="stylesheet" href="/vendor/agencenous/jquery-tabs/jquery-tabs.css"/>
<script src="/vendor/agencenous/jquery-tabs/jquery-tabs.js"/>

Example

<div class="content">
  <section>
    <h3>Section 1</h3>
    <p>Somme content</p>
  </section>
  <section>
    <h3>Section 2</h3>
    <p>Somme content</p>
  </section>
  <section>
    <h3>Section 3</h3>
    <p>Somme content</p>
</section>
</div>

And then, just instanciate:

jQuery('.content').createTabs({
		children: 'section',
		childrenTitle: 'h3'
});

Additional params

  • hideUntilLast
  • prevText,
  • nextText,
  • prevClass,
  • nextClass

Full example

jQuery('#form').createTabs({
		children: 'fieldset',
		childrenTitle: '.tab-title',
		hideUntilLast: 'input[type=submit]',
		prevText: '« back',
		nextText: 'Next »',
		prevClass: 'btn',
		nextClass: 'btn'
});

Triggers

jQuery('#form')
  .on('tab_ready', function(){
    console.log('READY!');
  })
  .on('tab_change', function(){
    console.log('TAB CHANGED!');
  })
.createTabs();