This is a read-only archive of the Framer Community on Facebook.

What is Framer? Join the Community
Return to index
Juan J. Ramirez
Posted May 22 - Read on Facebook

Noob question. I'm trying to simulate a drop-down menu but I can't define a way to toggle the visibility. If I remember well in jQuery you can do this by just invoking a toggle method but I don't seem to find anything similar in Framer.

What I'm trying to do right now is just writing an if statement to handle this but it's not returning the expected result. This is what I have:

var layerB = myLayers["Dropdown Menu Opened"];
var layerA = myLayers["Dropdown Menu"];

layerB.visible=false;
layerA.on(Events.Click, function(event, layer) {
if(layerB.visible==false) {
return layerB.visible = true
} else if (layer.visible==true) {
return layerB.visible = false
}
});

Can anyone help me to figure out this?

6 Comments

Stephen Crowley

Create a "showFunction" that sets the dropdown's opacity to 1 and a hideFunction that sets the dropdown's opacity to 0. then in the click event add utils.toggle(showFunction, hideFuncion) ? Just thinking aloud

Stephen Crowley

Or maybe move the view off canvas y = -1000 and have it jump to y: 130 or where ever you want it to go?

Koen Bok

This should be pretty easy with layer states and the visible property.

Koen Bok

Or the utils.toggle like Stephen describes

Juan J. Ramirez

So, something like this?

layerA.on(Events.Click, function(event, layer) {
showFunction = function() {
layerB.visible=true;
}
hideFunction = function() {
layerB.visible=false
}
Utils.toggle(showFunction, hideFunction)
});

Rob Jones

Assuming a utils.toggle exists (I don't see it in the docs), I would think you would have a menu layer that is shown or hidden, and you could just toggle the visibility property:

menu = new Layer({
visibility: true;
})

menuTrigger.on(Events.Click, function() {
menu.visible = utils.toggle(menu.visible);
})

I know this is not totally the correct syntax, but the idea is there...you want to toggle the visibility property, not toggle between functions

Read the entire post on Facebook