Horizontal Accordion Slider with jQuery and TweenMax - slideOut.js

File Size: 1.08 MB
Views Total: 9707
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Horizontal Accordion Slider with jQuery and TweenMax - slideOut.js

slideOut.js is a simple, small jQuery plugin used to create a smooth horizontal accordion that uses TweenMax.js for awesome expand/collapse animations.

How to use it:

1. Build the html structure for the accordion panels like this:

<div id="panles">
  <div class="panelHolder active">
    <div class="contentHolder"> 
      <img src="tab-1.png" class="tab"> 
      <a href="#"><img src="img-1.png" class="model"> </a> 
    </div>
  </div>
  <div class="panelHolder">
    <div class="contentHolder"> 
      <img src="tab-2.png" class="tab"> 
      <a href="#"><img src="img-2.png" class="model"> </a> 
    </div>
  </div>
  <div class="panelHolder">
    <div class="contentHolder"> 
      <img src="tab-3.png" class="tab"> 
      <a href="#"><img src="img-3.png" class="model"> </a> 
    </div>
  </div>
  <div class="panelHolder">
    <div class="contentHolder"> 
      <img src="tab-4.png" class="tab"> 
      <a href="#"><img src="img-4.png" class="model"> </a> 
    </div>
  </div>
  <div class="panelHolder last">
    <div class="contentHolder"> 
      <img src="tab-5.png" class="tab"> 
      <a href="#"><img src="img-5.png" class="model"> </a> 
    </div>
  </div>
</div>

2. Load the necessary jQuery library, Tweenmax.js and the jQuery slideOut.js plugin at the end of the webpage.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> 
<script src="//cdnjs.cloudflare.com/ajax/libs/gsap/1.15.1/TweenMax.min.js"></script> 
<script src="scripts/slideOut.js"></script>

3. Basic CSS styles for the accordion slider.

#panles {
  width: 1212px;
  height: 676px;
  position: relative;
  overflow: hidden;
  background: white;
}

.panelHolder {
  float: left;
  position: relative;
  padding-right: 8px;
  width: 100px;
  height: 676px;
  overflow: hidden;
  background: white;
}

.contentHolder {
  float: left;
  position: relative;
  background: white;
  width: 772px;
}

.tab {
  width: 100px;
  position: absolute;
  z-index: 1;
}

.model {
  position: absolute;
  opacity: 0;
  width: 100%;
  height: 676px;
}

.panelTitle.last { padding: 0; }

.active.panelHolder { width: 772px; }

.active .tab { opacity: 0; }

.active .model {
  visibility: visible;
  z-index: 0;
  opacity: 1;
}

Change log:

2015-04-08

  • bug fix for mouse out event not firing if you mouse out to soon.
  • proxy events so this is always the slideOutPanel object

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