Menu icon Foundation
Toggler with Motion UI - Hide Element Initially

Anybody know how to have something hidden initially and then use Toggler. Using the hide class just keeps the div hidden. Thanks in advance!

Motion UIfoundation 6toggleranimation

Anybody know how to have something hidden initially and then use Toggler. Using the hide class just keeps the div hidden. Thanks in advance!

Rafi Benkual over 3 years ago

You can add display: none; to the CSS for the element you're targeting.

Nils Wiere over 3 years ago

Hi Rafi,

in my case this code didn't toggle the panel:

    <p><a data-toggle="panel">Toggle Panel</a></p>
    <div id="panel" data-toggler style="display: none;">
      <h4>Hello!</h4>
    </div>

Am I missing something here?

However, this code works, when not using Motion UI:

    <p><a data-toggle="panel">Toggle Panel</a></p>
    <div id="panel" class="hide" data-toggler=".hide">
      <h4>Hello!</h4>
    </div>

But I couldn't figure out, how to use Motion UI then. These lines didn't do the trick:

    <p><a data-toggle="panel">Toggle Panel</a></p>
    <div id="panel" class="hide" data-toggler=".hide" data-animate="slide-in-down slide-out-up">
      <h4>Hello!</h4>
    </div>

Do you have any idea?

Thanks,
Nils

Mike Moreau over 2 years ago

I had this same question. My solution ended up something like this.

Toggling the .hide class but adding my own class with SCSS mixins from Motion UI

 

<p><a href="#" class="button large" data-toggle="toggleMe">Learn More</a></p>
<div id="toggleMe" class="styleTheToggle hide" data-toggler=".hide">this div gets toggled......</div>

 

.styleTheToggle{
	@include mui-animation(hinge(in, top, edge, 2000px, from-back));
	animation-duration: 1.8s;
}