Horizontal Accordion Slider Plugin with jQuery Pana Accordion - Download Horizontal Accordion Slider Plugin with jQuery - Pana Accordion

Download Horizontal Accordion Slider Plugin with jQuery – Pana Accordion

By Posted on

This time I will share jQuery Plugin and tutorial about Horizontal Accordion Slider Plugin with jQuery – Pana Accordion, hope it will help you in programming stack.

Horizontal Accordion Slider Plugin with jQuery Pana Accordion - Download Horizontal Accordion Slider Plugin with jQuery - Pana Accordion

File Size: 5.82 KB
Views Total: 10847
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

Demo Download

Pana Accordion is a lightweight jQuery plugin for creating a horizontal accordion that expands or collapses the associated content on mouse hover.

How to use it:

1. Build the html structure for the accordion panels.

view source
01 <div class="pana-accordion" id="accordion">
02   <div class="pana-accordion-wrap">
03     <div class="pana-accordion-item">
04       <img src="accordion-1.jpg">
05     </div>
06     <div class="pana-accordion-item">
07       <img src="accordion-2.jpg">
08     </div>
09     <div class="pana-accordion-item">
10       <img src="accordion-3.jpg">
11     </div>
12     ...
13   </div>
14 </div>

2. Include jQuery library and the jQuery Pana Accordion plugin on the web page.

view source
1 <script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
2 <script src="pana-accordion.js"></script>

3. Basic CSS styles for the accordion.

view source
01 .pana-accordion {
02   width: 800px;
03   height: 200px;
04   margin: 20px auto;
05   position: relative;
06   overflow: hidden
07 }
08  
09 .pana-accordion .pana-accordion-wrap {
10   margin-left: -1px;
11   position: relative;
12   width: 300%
13 }
14  
15 .pana-accordion .pana-accordion-wrap .pana-accordion-item {
16   border-left: 1px solid #BABABA;
17   width: 100px;
18   height: 200px;
19   overflow: hidden;
20   float: left;
21   position: absolute;
22   left: 0;
23   top: 0
24 }

4. Style the accordion mask as you hover over an accordion panel.

view source
01 .pana-accordion .pana-accordion-wrap .pana-accordion-item .pana-accordion-mask {
02   width: 100%;
03   height: 100%;
04   left: 0;
05   top: 0;
06   position: absolute;
07   z-index: 10;
08   background-color: #000;
09   filter: alpha(opacity=40);
10   -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=40)";
11   -webkit-opacity: 0.4;
12   -khtml-opacity: 0.4;
13   -moz-opacity: 0.4;
14   -ms-opacity: 0.4;
15   -o-opacity: 0.4;
16   opacity: 0.4
17 }
18  
19 .pana-accordion .pana-accordion-wrap .pana-accordion-item.active .pana-accordion-mask { display: none }

5. Initialize the accordion.

view source
1 accordion.init({
2   id: 'accordion'
3 });

6. Configuration options.

view source
01 expandWidth: 500,
02 itemWidth: 100,
03 extpand: 0,
04 autoPlay: true,
05 delay: 3000,
06 animateTime: 400,
07 borderWidth: 1,
08 autoPlay: true,
09 deviator: 30,
10 bounce:"-50px"

Change log:

2017-10-20

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

source : jqueryscript.net

Related posts: