Unfold (Dropdown and others)

Toggle contextual overlays for displaying lists of links and more with the Front 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 dropdown with opening on hover.

Methods

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 scrolling false

hasOverlay

 Informs the script about the presence of an overlay false

smartPositionOff

 If true, then the automatic positioning of the element's front 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. {}

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'

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'

overlayClass

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

closeBreakpoint

 Close unfold if window bigger then custom window resolution {sm|md|lg|xl} false

resolutionsList

 Resolution list, you can customize width if you need resolutionsList: { xs: 0, sm: 576, md: 768, lg: 992, xl: 1200 }

afterOpen

 Function performed before block opening () => {}

afterClose

 Function performed after block closure () => {}