minimal sliding box - Free Download Minimal Accordion/Sliding Box Plugin - Accordion.js

Free Download Minimal Accordion/Sliding Box Plugin – Accordion.js

By Posted on

This time I will share jQuery Plugin and tutorial about Minimal Accordion/Sliding Box Plugin – Accordion.js, hope it will help you in programming stack.

minimal sliding box - Free Download Minimal Accordion/Sliding Box Plugin - Accordion.js
File Size: 8.81 KB
Views Total: 830
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

Demo Download

A minimal accordion engine written in jQuery that enables the users to collapse and expand sectioned content just like a sliding box.

The plugin simply provides a basic accordion logic to your sectioned content. Feel free to apply custom styles & animations to the accordion panels using your own CSS.

How to use it:

1. Add accordion headers (controls) and panels to the accordion interface as follows:

view source
01 <div id="my-accordion" class="accordion">
02   <div class="group">
03     <a class="control" href="#"><a href="https://www.jqueryscript.net/accordion/">Accordion</a> #1 <span class="expand">&#9660;</span><span class="collapse">&#9650;</span></a>
04     <div class="box">
05       <div class="inner">
06         Accordion 1 Content
07       </div>
08     </div>
09   </div>
10   <div class="group">
11     <a class="control" href="#">Accordion #2 <span class="expand">&#9660;</span><span class="collapse">&#9650;</span></a>
12     <div class="box">
13       <div class="inner">
14         Accordion 2 Content
15       </div>
16     </div>
17   </div>
18   <div class="group">
19     <a class="control" href="#">Accordion #3 <span class="expand">&#9660;</span><span class="collapse">&#9650;</span></a>
20     <div class="box">
21       <div class="inner">
22         Accordion 3 Content
23       </div>
24     </div>
25   </div>
26 </div>

2. Add jQuery JavaScript library and the Accordion.js script to the webpage.

view source
1 <script src="/path/to/cdn/jquery.min.js"></script>
2 <script src="/path/to/js/accordion.js"></script>

3. Initailize the accordion plugin and done.

view source
1 $(function() {
2   $('#my-accordion').accordion();
3 });

4. Enable the smooth slide up/down animations. Default: false.

view source
1 $(function() {
2   $('#my-accordion').accordion({
3     animation: true,
4     speed: 500 // default: 200
5   });
6 });

5. Determine whether to allow multiple accordion panels to be expanded at a time. Default: false.

view source
1 $(function() {
2   $('#my-accordion').accordion({
3     multiple: true
4   });
5 });

6. Customize the appearance of the accordion with CSS.

view source
01 .accordion {
02   border-bottom: 1px solid #9a9a9a;
03 }
04  
05 .accordion .control {
06   position: relative;
07   text-decoration: none;
08   display: block;
09   font-weight: bold;
10   font-size: 16px;
11   line-height: 40px;
12   padding: 0.4em 1em;
13   color: #333333;
14   background-color: #f5f5f5;
15   background-image: -moz-linear-gradient(top, #ffffff, #e6e6e6);
16   background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), to(#e6e6e6));
17   background-image: -webkit-linear-gradient(top, #ffffff, #e6e6e6);
18   background-image: -o-linear-gradient(top, #ffffff, #e6e6e6);
19   background-image: linear-gradient(to bottom, #ffffff, #e6e6e6);
20   background-repeat: repeat-x;
21   filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff', endColorstr='#ffe6e6e6', GradientType=0);
22   filter: progid: DXImageTransform.Microsoft.gradient(enabled=false);
23 }
24  
25 .accordion .control .collapse {
26   position: absolute;
27   right: 10px;
28   top: 7px;
29 }
30  
31 .accordion .control .expand {
32   position: absolute;
33   right: 10px;
34   top: 7px;
35 }
36  
37 .accordion .control i {
38   font-size: 1.2e

Related posts: