Skip to main content

Unfold (Dropdown and others)

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

How to use?

Wrap the unfold's toggle (your button or link) and the unfold menu within an element that declares position: relative;. Unfolds can be triggered from <a> or <button> elements to better fit your potential needs.

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

            
              <script src="../../assets/js/components/hs.unfold.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 component
                  $.HSCore.components.HSUnfold.init($('[data-unfold-target]'));
                });
              </script>
            
          

Basic example

            
              <div class="position-relative">
                <a id="dropdownBasicExampleInvoker" class="u-unfold-wrapper" href="javascript:;" role="button"
                   aria-controls="dropdownBasicExample"
                   aria-haspopup="true"
                   aria-expanded="false"
                   data-unfold-event="click"
                   data-unfold-target="#dropdownBasicExample"
                   data-unfold-type="css-animation"
                   data-unfold-duration="300"
                   data-unfold-delay="300"
                   data-unfold-hide-on-scroll="true"
                   data-unfold-animation-in="slideInUp"
                   data-unfold-animation-out="fadeOut">
                  Basic example
                  <span class="fa fa-angle-down u-unfold__icon-pointer"></span>
                </a>

                <div id="dropdownBasicExample" class="u-unfold list-group list-group-flush list-group-borderless mt-2" aria-labelledby="dropdownBasicExampleInvoker">
                  <a class="list-group-item list-group-item-action" href="#">One</a>
                  <a class="list-group-item list-group-item-action" href="#">Two</a>
                  <a class="list-group-item list-group-item-action" href="#">Three</a>
                </div>
              </div>
            
          

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:

            
              <div class="position-relative">
                <button id="dropdownSingleButtonInvoker" class="btn btn-secondary" type="button"
                        aria-controls="dropdownSingleButton"
                        aria-haspopup="true"
                        aria-expanded="false"
                        data-unfold-event="click"
                        data-unfold-target="#dropdownSingleButton"
                        data-unfold-type="css-animation"
                        data-unfold-duration="300"
                        data-unfold-delay="300"
                        data-unfold-hide-on-scroll="true"
                        data-unfold-animation-in="slideInUp"
                        data-unfold-animation-out="fadeOut">
                  Basic example
                  <span class="fa fa-angle-down u-unfold__icon-pointer"></span>
                </button>

                <div id="dropdownSingleButton" class="u-unfold list-group list-group-flush list-group-borderless mt-2" aria-labelledby="dropdownSingleButtonInvoker">
                  <a class="list-group-item list-group-item-action" href="#">One</a>
                  <a class="list-group-item list-group-item-action" href="#">Two</a>
                  <a class="list-group-item list-group-item-action" href="#">Three</a>
                </div>
              </div>
            
          

And with <a> elements:

            
              <div class="position-relative">
                <a id="dropdownWithHrefInvoker" class="btn btn-secondary" href="javascript:;" role="button"
                   aria-controls="dropdownWithHref"
                   aria-haspopup="true"
                   aria-expanded="false"
                   data-unfold-event="click"
                   data-unfold-target="#dropdownWithHref"
                   data-unfold-type="css-animation"
                   data-unfold-duration="300"
                   data-unfold-delay="300"
                   data-unfold-hide-on-scroll="true"
                   data-unfold-animation-in="slideInUp"
                   data-unfold-animation-out="fadeOut">
                  Basic example
                  <span class="fa fa-angle-down u-unfold__icon-pointer"></span>
                </a>

                <div id="dropdownWithHref" class="u-unfold list-group list-group-flush list-group-borderless mt-2" aria-labelledby="dropdownWithHrefInvoker">
                  <a class="list-group-item list-group-item-action" href="#">One</a>
                  <a class="list-group-item list-group-item-action" href="#">Two</a>
                  <a class="list-group-item list-group-item-action" href="#">Three</a>
                </div>
              </div>
            
          

And with hover effect:

            
              <div class="position-relative">
                <a id="dropdownOnHoverInvoker" class="btn btn-secondary" href="javascript:;" role="button"
                   aria-controls="dropdownOnHover"
                   aria-haspopup="true"
                   aria-expanded="false"
                   data-unfold-event="hover"
                   data-unfold-target="#dropdownOnHover"
                   data-unfold-type="css-animation"
                   data-unfold-duration="300"
                   data-unfold-delay="300"
                   data-unfold-hide-on-scroll="true"
                   data-unfold-animation-in="slideInUp"
                   data-unfold-animation-out="fadeOut">
                  On Hover
                  <span class="fa fa-angle-down u-unfold__icon-pointer"></span>
                </a>

                <div id="dropdownOnHover" class="u-unfold list-group list-group-flush list-group-borderless mt-2" aria-labelledby="dropdownOnHoverInvoker">
                  <a class="list-group-item list-group-item-action" href="#">One</a>
                  <a class="list-group-item list-group-item-action" href="#">Two</a>
                  <a class="list-group-item list-group-item-action" href="#">Three</a>
                </div>
              </div>
            
          

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

            
              <div class="position-relative">
                <button id="dropdownPrimaryInvoker" class="btn btn-primary" type="button"
                        aria-controls="dropdownPrimary"
                        aria-haspopup="true"
                        aria-expanded="false"
                        data-unfold-event="click"
                        data-unfold-target="#dropdownPrimary"
                        data-unfold-type="css-animation"
                        data-unfold-duration="300"
                        data-unfold-delay="300"
                        data-unfold-hide-on-scroll="true"
                        data-unfold-animation-in="slideInUp"
                        data-unfold-animation-out="fadeOut">
                  Primary
                  <span class="fa fa-angle-down u-unfold__icon-pointer"></span>
                </button>

                <div id="dropdownPrimary" class="u-unfold list-group list-group-flush list-group-borderless mt-2" aria-labelledby="dropdownPrimaryInvoker">
                  <a class="list-group-item list-group-item-action" href="#">One</a>
                  <a class="list-group-item list-group-item-action" href="#">Two</a>
                  <a class="list-group-item list-group-item-action" href="#">Three</a>
                </div>
              </div>
            
          

JavaScript behavior

Callbacks

            
              afterOpen: function (invoker) {} - function
              afterClose: function (invoker) {} - function
            
          

Methods

Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data-, as in data-unfold-type="".

Attributes Description Default value

data-unfold-type

Show/hide effect.
If data-unfold-type="" is set to jquery-slide, the jQuery slideDown effect will be applied to the opening and slideUp to the close. If data-unfold-type="" is set to css-animation, then any effect from the library animate.css can be used.

data-unfold-target

Accepts the ID of the hidden element as a parameter.

data-unfold-event

Defines by what event the script will fire. Valid values are:
  • hover
  • click
click

data-unfold-duration

Specifies the duration of the animation. 300

data-unfold-easing

Determines the smoothness of the animation, if data-unfold-type="" is set to jquery-slide
  • linear
  • swing
jquery.easing.min.js plugin is required to extend the plugin.

Additional values:

  • easeInQuad
  • easeOutQuad
  • easeInOutQuad
  • easeInCubic
  • easeOutCubic
  • easeInOutCubic
  • easeInQuart
  • easeOutQuart
  • easeInOutQuart
  • easeInQuint
  • easeOutQuint
  • easeInOutQuint
  • easeInSine
  • easeOutSine
  • easeInOutSine
  • easeInExpo
  • easeOutExpo
  • easeInOutExpo
  • easeInCirc
  • easeOutCirc
  • easeInOutCirc
  • easeInElastic
  • easeOutElastic
  • easeInOutElastic
  • easeInBack
  • easeOutBack
  • easeInOutBack
  • easeInBounce
  • easeOutBounce
  • easeInOutBounce
linear

data-unfold-delay

Specifies the animation delay. 350

data-unfold-animation-in

Revealing animation effect, if data-unfold-type="" is set to css-animation.
To run the script, you must additionally link animate.css
All available animation values, can be found here
fadeIn

data-unfold-animation-out

Disappearing animation effect, if data-unfold-type="" is set to css-animation.
To run the script, you must additionally link animate.css
All available animation values, can be found here
fadeOut

data-unfold-hide-on-scroll

If true, enables hiding the content on scroll. true

data-unfold-hide-on-blur

If true, enables hiding the content with blur effect. false

afterOpen: function (invoker) {}

Executes the code inside the body of the function each time it is opened.

afterClose: function (invoker) {}

Executes the code inside the body of the function each time it is closed.