Menu icon Foundation
toggle doesn't work with animations if adding classes

I'm trying to use toggle to display an initially hidden object, however this gets screwed up if any animations are used and no classes are added

I'm using this scss

        form {
          display: none;
          &.visible {
            display: inline-block;
          }
        }

this code works

              <button id="add-tag-sub-1" data-toggle="add-tag-sub-form-1"><i class="fi-plus"></i></button>
              <form class="add-tag-sub-form" id="add-tag-sub-form-1" data-toggler=".visible">
                <input type="text" placeholder="tag">
              </form>

but this does not

              <button id="add-tag-sub-1" data-toggle="add-tag-sub-form-1"><i class="fi-plus"></i></button>
              <form class="add-tag-sub-form" id="add-tag-sub-form-1" data-toggler=".visible" data-animate="hinge-in-from-left hinge-out-from-left">
                <input type="text" placeholder="tag">
              </form>

togglesitestoggle-classmotion-ui

I'm trying to use toggle to display an initially hidden object, however this gets screwed up if any animations are used and no classes are added

I'm using this scss

        form {
          display: none;
          &.visible {
            display: inline-block;
          }
        }

this code works

              <button id="add-tag-sub-1" data-toggle="add-tag-sub-form-1"><i class="fi-plus"></i></button>
              <form class="add-tag-sub-form" id="add-tag-sub-form-1" data-toggler=".visible">
                <input type="text" placeholder="tag">
              </form>

but this does not

              <button id="add-tag-sub-1" data-toggle="add-tag-sub-form-1"><i class="fi-plus"></i></button>
              <form class="add-tag-sub-form" id="add-tag-sub-form-1" data-toggler=".visible" data-animate="hinge-in-from-left hinge-out-from-left">
                <input type="text" placeholder="tag">
              </form>
Rafi Benkual about 3 years ago

Hi Calder,

It might be safer to reset the display property to static instead of inline-block. Actually, a div around the form will be better to show/hide so you don't affect the display property on the forms.

Also, might be helpful, we wrote a lesson on using toggler http://zurb.com/university/lessons/show-me-show-me-show-me-how-you-do-that-trick