Toggle OPEN with custom attributes

I am trying to learn more about https://theme.co/docs/toggleable and the overall custom attributes linked to it.

In the link shared above, there’s a way to “close” a modal, but what about opening it? Is there any custom attribute that would achieve this?

This is where it gets a little more custom. Because you can open specific elements
Try data-x-toggle="1" first because that will try to find the closest toggleable. There’s a couple of other types of “opening” based on if you want animations or want a layered effect and we’ll update the docs promptly on that.

And then controlling a specific element.

data-x-toggleable=e356-e9 Essentially what ID it’s going to point to. I think you can overwrite the data-x-toggleable id as well on the modal element. See what attributes the off canvas or modal toggle are using to get an idea of what you need to do.

Thanks for bringing this up the toggleable docs could use some more info.

Thanks for the info, i’m basically a bit behind with the theme and i’m getting up to speed, the documentation about this is quite vague but i can understand why (it’s quite a custom thing to do!).

I’ll test it out and let you know.

oh yeah, does the custom attributes accept the dynamic fields from pro? as in, if i have a looper, can i use custom attributes linking to the class dynamically by using something from what pro offers in the dynamic field menu?

Hello @franticape,

Yes, the custom attributes field accepts the dynamic content.

Best Regards.

Unfortunately nothing worked here :(, i’ll have another round of tests later. however is the correct one data-x-toggle or data-x-toggleable ? it looks like 2 different things however that are in the same “toggle” element and might need to work together?

If you are trying to interact with a modal you’ll use. data-x-toggleable={yourid} it’s a little confusing because this is mostly internal, but we are happy to open the api more. Currently there is no way to force an open, but It will always just change state to the opposite of what is was. So for modal by default adding data-x-toggleable will open it on a page load. If your having difficulty send us some screenshots.

I’ve added some programming docs on toggleable if that is of any interest to you. We’re happy to add anything to the api as well and always welcome.

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.