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

One Two Three

            
              <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:

One Two Three

            
              <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:

Basic example

One Two Three

            
              <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:

On Hover

One Two Three

            
              <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:

One Two Three

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

Sidebar

By default, Space .u-sidebar is right positioned. To left position the sidebar, add .u-sidebar--left modifier class to a parent, which also repositions the box-shadow style from right to left, and change the animation options data-unfold-animation-in="" along with data-unfold-animation-out="" from right to left. For example, data-unfold-animation-in="fadeInLeft".

              
                <!-- Toggle -->
                <a id="sidebarBasicUsageInvoker" class="btn btn-xs btn-icon btn-text-secondary" href="javascript:;" role="button"
                   aria-controls="sidebarBasicUsage"
                   aria-haspopup="true"
                   aria-expanded="false"
                   data-unfold-event="click"
                   data-unfold-hide-on-scroll="false"
                   data-unfold-target="#sidebarBasicUsage"
                   data-unfold-type="css-animation"
                   data-unfold-animation-in="fadeInRight"
                   data-unfold-animation-out="fadeOutRight"
                   data-unfold-duration="500">
                  <span class="fa fa-user-circle btn-icon__inner font-size-14"></span>
                </a>
                <!-- End Toggle -->

                <!-- Sidebar Content -->
                <aside id="sidebarBasicUsage" class="u-sidebar u-unfold--css-animation u-unfold--hidden" aria-labelledby="sidebarBasicUsageInvoker">
                  <div class="u-sidebar__scroller">
                    <div class="u-sidebar__container">
                      <div class="u-header-sidebar__footer-offset">
                        <div class="d-flex align-items-center pt-4 px-7">
                          <button type="button" class="close ml-auto"
                                  aria-controls="sidebarBasicUsage"
                                  aria-haspopup="true"
                                  aria-expanded="false"
                                  data-unfold-event="click"
                                  data-unfold-hide-on-scroll="false"
                                  data-unfold-target="#sidebarBasicUsage"
                                  data-unfold-type="css-animation"
                                  data-unfold-animation-in="fadeInRight"
                                  data-unfold-animation-out="fadeOutRight"
                                  data-unfold-duration="500">
                            <span aria-hidden="true">×</span>
                          </button>
                        </div>

                        <div class="js-scrollbar u-sidebar__body">
                        </div>
                      </div>
                    </div>
                  </div>
                </aside>
                <!-- End Sidebar Content -->

            
              <script>
                // initialization of unfold component
                $.HSCore.components.HSUnfold.init($('[data-unfold-target]');
              </script>

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.

Unfold (Dropdown and others)

How to use?

Basic example

Single button

Sidebar

JavaScript behavior

Callbacks

Methods

Additional values: