Tabs And Accordions Made Easy - jQuery jpix Plugin

Tabs And Accordions Made Easy - jQuery jpix Plugin
File Size: 4.92 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

jpix is a simple yet multifunctional jQuery plugin that makes it easier to create tabs and multi-level accordion interfaces with just one JS call.

How to use it:

1. Load the minified version of the jQuery jpix plugin after jQuery library and you're ready to go.

<script src="//code.jquery.com/jquery-3.2.0.min.js"></script>
<script src="jpix.min.js"></script>

2. Create a tabs interface where you can switch between tabbed content by clicking on the tabs.

<ul class="tabs">
  <li class="tab-link current" data-tab="tab-1">Tab One</li>
  <li class="tab-link" data-tab="tab-2">Tab Two</li>
  <li class="tab-link" data-tab="tab-3">Tab Three</li>
  <li class="tab-link" data-tab="tab-4">Tab Four</li>
</ul>

<div id="tab-1" class="tab-content current">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</div>
<div id="tab-2" class="tab-content">
   Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
<div id="tab-3" class="tab-content">
  Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
</div>
<div id="tab-4" class="tab-content">
  Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</div>
$('ul.tabs').pixiefyTabs();

3. Create a multi-level accordion from nested html lists.

<ul class="accordion">
  <li>
    <a class="panel-heading" href="#">Item 1</a>
    <ul class="shutter-panel-collapse">
      <li>Option 1</li>
      <li>Option 2</li>
      <li>Option 3</li>
    </ul>
  </li>
  
  <li>
    <a class="panel-heading" href="#">Item 2</a>
    <ul class="shutter-panel-collapse">
      <li>Option 1</li>
      <li>Option 2</li>
      <li>Option 3</li>
    </ul>
  </li>
  
  <li>
    <a class="panel-heading" href="#">Item 3</a>
    <ul class="shutter-panel-collapse">
      <li>
        <a href="#" class="panel-heading">Open Inner</a>
        <div class="shutter-panel-collapse">
          <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas tempus placerat fringilla. Duis a elit et dolor laoreet volutpat. Aliquam ultrices mauris id mattis imperdiet. Aenean cursus ultrices justo et varius. Suspendisse aliquam orci id dui dapibus
            blandit. In hac habitasse platea dictumst. Sed risus velit, pellentesque eu enim ac, ultricies pretium felis.
          </p>
        </div>
      </li>
      
      <li>
        <a href="#" class="panel-heading">Open Inner #2</a>
        <div class="shutter-panel-collapse">
          <p>
            Children will automatically close upon closing its parent.
          </p>
        </div>
      </li>
      
      <li>Option 3</li>
    </ul>
  </li>
  
  <li>
    <a class="panel-heading" href="#">Item 4</a>
    <ul class="shutter-panel-collapse">
      <li>
        <a href="#" class="panel-heading">Technically any number of nested elements</a>
        <ul class="shutter-panel-collapse">
          <li>
            <a href="#" class="panel-heading">Another nested element</a>
            <div class="shutter-panel-collapse">
              <p>
                As long as the inner element has inner as one of its classes then it will be toggled.
              </p>
              <p>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas tempus placerat fringilla. Duis a elit et dolor laoreet volutpat. Aliquam ultrices mauris id mattis imperdiet. Aenean cursus ultrices justo et varius. Suspendisse aliquam orci id dui dapibus
                blandit. In hac habitasse platea dictumst. Sed risus velit, pellentesque eu enim ac, ultricies pretium felis.
              </p>
            </div>
          </li>
        </ul>
      </li>
      
      <li>Option 2</li>
      
      <li>Option 3</li>
    </ul>
  </li>
</ul>
$('ul.accordion').pixiefyAccordion();

4. Apply your own CSS styles to the tabs & accordion interfaces.

ul {
  list-style: none;
  padding: 0;
}

ul .shutter-panel-collapse {
  padding-left: 1em;
  overflow: hidden;
  display: none;
}

ul .shutter-panel-collapse.show { /*display: block;*/
}

ul li { margin: .5em 0; }

ul li a.panel-heading {
  width: 100%;
  display: block;
  background: rgba(0, 0, 0, 0.78);
  color: #fefefe;
  padding: .75em;
  border-radius: 0.15em;
  transition: background .3s ease;
}

ul li a.panel-heading:hover { background: rgba(0, 0, 0, 0.9); }

.container {
  width: 800px;
  margin: 0 auto;
}

ul.tabs {
  margin: 0px;
  padding: 0px;
  list-style: none;
}

ul.tabs li {
  background: none;
  color: #222;
  display: inline-block;
  padding: 10px 15px;
  cursor: pointer;
}

ul.tabs li.current {
  background: #ededed;
  color: #222;
}

.tab-content {
  display: none;
  background: #ededed;
  padding: 15px;
}

Change log:

2017-04-11


This awesome jQuery plugin is developed by mlbd. For more Advanced Usages, please check the demo page or visit the official website.