expand collapse anything - Free Download Expand And Collapse Anything W1ith jQuery - Expander

Free Download Expand And Collapse Anything W1ith jQuery – Expander

By Posted on

This time I will share jQuery Plugin and tutorial about Expand And Collapse Anything W1ith jQuery – Expander, hope it will help you in programming stack.

expand collapse anything - Free Download Expand And Collapse Anything W1ith jQuery - Expander
File Size: 145 KB
Views Total: 1003
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

Demo Download

Expander is a powerful and multipurpose jQuery content toggle plugin for toggling the visibility of any content blocks with slide up & slide down animations.

It uses Popper.js library to provides a smart auto-position functionality that automatically re-position the content to make it stay within the screen.

Ideal for creating smooth accordion and dropdown components on your web app.

How to use it:

1. Insert the Expander plugin’s files into the HTML file.

view source
1 <!-- Required -->
2 <script src="/path/to/cdn/jquery.slim.min.js"></script>
3 <!-- Expander files -->
4 <link rel="stylesheet" href="/path/to/dist/jquery.expander.min.css" />
5 <script src="/path/to/dist/jquery.expander.min.js"></script>

2. Create a single expanding block with the following data attributes:

  • data-expander: Required
  • data-toggle: Toggle element
  • data-body: Element to toggle
view source
1 <div class="accordion" data-expander>
2   <div class="accordion__head" data-toggle>
3     Click Me To Toggle
4   </div>
5   <div class="accordion__body" data-body>
6     Any Content Here
7   </div>
8 </div>

3. Create connected expanding blocks (accordion):

view source
01 <div class="accordion" data-expander="my-accordion">
02   <div class="accordion__head" data-toggle>
03     Click Me To Toggle
04   </div>
05   <div class="accordion__body" data-body>
06     Any Content Here
07   </div>
08 </div>
09  
10 <div class="accordion" data-expander="my-accordion">
11   <div class="accordion__head" data-toggle>
12     Click Me To Toggle
13   </div>
14   <div class="accordion__body" data-body>
15     Any Content Here
16   </div>
17 </div>
18  
19 ...

3. Create a dropdown component that allows the user to expand/collapse content by hovering over the toggle element.

view source
1 <div class="dropdown">
2   <div class="dropdown__head" data-toggle>Hover Me</div>
3   <div class="dropdown__body" data-body>
4     Any Content Here
5   </div>
6 </div>
view source
1 $('.dropdown').expander({
2   dropdown: 'bottom'
3 });

4. All possible options to customize the expander plugin.

view source
01 $('element').expander({
02  
03   // determine whether to show the content on page load
04   opened: false,
05  
06   // additional CSS class(es)
07   class: false,
08  
09   // determine the content is closeable
10   closeable: true,
11  
12   // prevent default actions
13   preventDefault: true,
14  
15   // duration of the animation in ms
16   animationDuration: 300,
17  
18   // elements that will be shown/hidden
19   body: [],
20  
21   // elements that will toggle the visibility
22   toggle: [],
23  
24   // elements that will expand the content
25   open: [],
26  
27   // elements that will collapse the content
28   close: [],
29  
30   // enable dropdown mode here
31   dropdown: false,
32  
33   // determine if the dropdown is hoverable
34   dropdownHoverable: true,
35  
36   // popper.js options
37   popper: {},
38  
39 });

5. Callback functions.

view source
01 $('element').expander({
02  
03   onOpen: function(event, expander){
04     // on open
05   },
06  
07   onClose: function(event, expander){
08     // on close
09   },
10  
11   onToggle: function(event, expander){
12     // on toggle
13   },
14  
15   onInit: function(expander){
16     // on init
17   }
18  
19 });

Changelog:

2020-11-25

  • Added popper options
  • Fixed minor bugs

Related posts: