Unfold (Dropdown and others)

Toggle contextual overlays for displaying lists of links and more with the Vodi unfold plugin.

How to use?

Copy-paste the following <script> near the end of your pages under JS Implementing Plugins to enable it.

              
                <script src="../../assets/vendor/hs-unfold/dist/hs-unfold.min.js"></script>
              
            

Copy-paste the init function under JS Plugins Init., before the closing </body> tag, to enable it.

              
                <script>
                  $(document).on('ready', function () {
                    // initialization of unfold
                    var unfold = new HSUnfold('.js-hs-unfold-invoker').init();
                  });
                </script>
              
            

Basic examples

Basic example with on hover effect.

                    
                      <!-- Unfold (Dropdown) -->
                      <div class="hs-unfold">
                        <a class="js-hs-unfold-invoker dropdown-nav-link dropdown-toggle" href="javascript:;"
                           data-hs-unfold-options='{
                             "target": "#basicDropdownHover",
                             "type": "css-animation",
                             "event": "hover"
                           }'>Basic example</a>

                        <div id="basicDropdownHover" class="hs-unfold-content dropdown-menu">
                          <a class="dropdown-item active" href="#">One</a>
                          <a class="dropdown-item" href="#">Two</a>
                          <a class="dropdown-item" href="#">Three</a>
                        </div>
                      </div>
                      <!-- End Unfold (Dropdown) -->
                    
                  

Another example with on click effect.

                    
                      <!-- Unfold (Dropdown) -->
                      <div class="hs-unfold">
                        <a class="js-hs-unfold-invoker dropdown-nav-link dropdown-toggle" href="javascript:;"
                           data-hs-unfold-options='{
                             "target": "#basicDropdownClick"
                           }'>Click me</a>

                        <div id="basicDropdownClick" class="hs-unfold-content dropdown-menu">
                          <a class="dropdown-item active" href="#">One</a>
                          <a class="dropdown-item" href="#">Two</a>
                          <a class="dropdown-item" href="#">Three</a>
                        </div>
                      </div>
                      <!-- End Unfold (Dropdown) -->
                    
                  

Single button

Any single .btn can be turned into a dropdown toggle with some markup changes. Here's how you can put them to work with either <button> elements:

                    
                      <!-- Unfold (Dropdown) -->
                      <div class="hs-unfold">
                        <button type="button" class="js-hs-unfold-invoker btn btn-sm btn-secondary dropdown-toggle"
                           data-hs-unfold-options='{
                             "target": "#dropdownSingleButton"
                           }'>Click me</button>

                        <div id="dropdownSingleButton" class="hs-unfold-content dropdown-menu">
                          <a class="dropdown-item active" href="#">One</a>
                          <a class="dropdown-item" href="#">Two</a>
                          <a class="dropdown-item" href="#">Three</a>
                        </div>
                      </div>
                      <!-- End Unfold (Dropdown) -->
                    
                  

And with <a> elements:

                    
                      <!-- Unfold (Dropdown) -->
                      <div class="hs-unfold">
                        <a class="js-hs-unfold-invoker btn btn-sm btn-secondary dropdown-toggle" href="javascript:;"
                           data-hs-unfold-options='{
                             "target": "#dropdownWithHref"
                           }'>Dropdown link</a>

                        <div id="dropdownWithHref" class="hs-unfold-content dropdown-menu">
                          <a class="dropdown-item active" href="#">One</a>
                          <a class="dropdown-item" href="#">Two</a>
                          <a class="dropdown-item" href="#">Three</a>
                        </div>
                      </div>
                      <!-- End Unfold (Dropdown) -->
                    
                  

And with hover effect:

                    
                      <!-- Unfold (Dropdown) -->
                      <div class="hs-unfold">
                        <a class="js-hs-unfold-invoker btn btn-sm btn-secondary dropdown-toggle" href="javascript:;"
                           data-hs-unfold-options='{
                             "target": "#dropdownOnHover",
                             "type": "css-animation",
                             "event": "hover"
                           }'>Dropdown on Hover</a>

                        <div id="dropdownOnHover" class="hs-unfold-content dropdown-menu">
                          <a class="dropdown-item active" href="#">One</a>
                          <a class="dropdown-item" href="#">Two</a>
                          <a class="dropdown-item" href="#">Three</a>
                        </div>
                      </div>
                      <!-- End Unfold (Dropdown) -->
                    
                  

The best part is you can do this with any button variant, too:

                    
                      <!-- Unfold (Dropdown) -->
                      <div class="hs-unfold">
                        <a class="js-hs-unfold-invoker btn btn-sm btn-primary dropdown-toggle" href="javascript:;"
                           data-hs-unfold-options='{
                             "target": "#dropdownPrimary"
                           }'>Primary</a>

                        <div id="dropdownPrimary" class="hs-unfold-content dropdown-menu">
                          <a class="dropdown-item active" href="#">One</a>
                          <a class="dropdown-item" href="#">Two</a>
                          <a class="dropdown-item" href="#">Three</a>
                        </div>
                      </div>
                      <!-- End Unfold (Dropdown) -->
                    
                  

SCSS

SCSS-files of the component can be found here assets/scss/vodi/vendor/hs-unfold/

JavaScript behavior

Extend

Plugin methods are called using a wrapper:

              
                <script>
                  $(document).on('ready', function () {
                    // initialization of unfold
                    $('.js-unfold-invoker').each(function () {
                      var unfold = new HSUnfold($(this)).init();
                    });
                  });
                </script>
              
            

Attributes

By assigning a variable, you can call the standard methods of the plugin:

              
                data-hs-unfold-options='{
                 ...
              }' - array
              
            

Methods

Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data-hs-unfold-options='{}'. For more detailed or missing attributes/functions, see the official Leaflet documentation page.

Parameters Description Default value

event

An event that opens / closes an element 'click'

type

Type of opening / closing of an element of an element. Possible values: simple, css-animation, jquery-slide 'simple'

duration

Animation speed 300

easing

Slowdown function for transition 'linear'

animationIn

CSS effect (class) of opening an element of an element 'slideInUp'

animationOut

CSS effect (class) of closing an element of an element 'fadeOut'

hideOnScroll

If true, then automatically closes all open anfold elements when shelling false

hasOverlay

Informs the script about the presence of an overlay false

smartPositionOff

If true, then the automatic positioning of the element's Vodi is disabled. It is possible to determine positioning directly from css false

isFullWindow

Determines if the block is full width or not. If true, then the smartposition is disabled. false

overlayStyles

Custom styles that are added when the overlay is generated. Example: { "backgroundColor": "#000", "fontSize": "14px" } {}

wrapperSelector

Class telling the script which element is the parent of the element '.hs-unfold'

contentSelector

A class telling the script which element inside the initialized object is the anfold element '.hs-unfold-content'

invokerSelector

A class telling the script which element inside the initialized object is an invoker '.js-hs-unfold-invoker'

invokerActiveClass

Class added to the current invoker '.hs-active'

overlayClass

Overlay class. This class is added to the overlay when the script creates it '.hs-unfold-overlay'

reverseClass

This class is added to the block, in the case of an invoker is located at the bottom of the viewport. This class allows you to show a block higher than the invoker '.hs-unfold-reverse-y'

afterOpen

Function performed before block opening () => {}

afterClose

Function performed after block closure () => {}