Create a button to open Modal elsewhere

[Pbalazs89]

Hi there,

For ease of reference, this is the page: https://test4.bestia.hu/termekek/

I’m trying to create a button that triggers an accordion for each product, which displays the product information.

Thing is, I tried this with multiple methods but failed so far, so I would like to ask for help:

Version A: (clicking on the red button - több információ ) I created a toggle hash, which when clicked, opens the accordion. This works great, except for two things:

1. It opens up ALL the accordions on the page, not just the given products. Is this fixable?
2. Clicking the Toggle hash again, does not close the given modal. Is this fixable?

Version B: It’s basically the same, but with javascript. If clicked, remove display:none method. The issue here is that I can’t target the specific product in the loop. Again, it removes display:none from all products. For this I would need a class that gets incremented with each product, but I’m not sure this is available in PRO.

Whichever is easier to fix would be helpful.

Thanks!

[ruenel]

Hello @Pbalazs89,

Thanks for writing in!

Please check out this example:

The accordion items has a toggle hash:

And the Button element has no link URL. You only have to add a custom attribute with the following:

By using the Toggleable feature, you can collapse or expand the accordion item. You can also do that with the
Modal element. For more details about the Toggleable feature, please check this out:
Toggleable | Themeco Docs

Best Regards.

[Pbalazs89]

Hi there,

Cheers for that. Only one issue left: Short video to showcase:

Explanation: This is a product archive page, and the toggleable code only takes one ID. How can I make this dynamic so that each Toggle Button opens the accordion related to that specific product?

[tristup]

Hi @Pbalazs89,

You can use {{dc:looper:index}} which outputs the loop number which is unique for a single loop. As shown in the screenshot, the ID will be id1, id2, id3 and so on.

Hope it helps.
Thanks

[Pbalazs89]

Hi there,

Thanks, that was a great suggestion!
Unfortunately, maybe I’m making a mistake, but the loop get’s calculated weirdly.
It increments where it shouldn’t. Short video attached:

Thank you for your help!

[tristup]

Hi @Pbalazs89,

I assume that you might be using two different Looper Consumer for Button and Accordion. You need to use one Looper Consumer to get the same value in Dynamic Content for Button and Accordion. If that is not the case, please share the credential along with the exact page URL for further assistance.

Thanks

[Pbalazs89]

I think they are using the same.
I uploaded the site here:

https://test4.bestia.hu/

The page in question is this one:

https://test4.bestia.hu/termekek/

The login will be added separately.

[ruenel]

Hello @Pbalazs89,

The Accordion item element’s data-x-toggleable value is generated dynamically by the builder. We cannot modify that. The dynamic content cannot do calculations and the looper index starts at 1. Regretfully we do not have any other means to get this accomplished. You may need to try other structure that does not use the Accordion element.

Thank you for your understanding.

[Pbalazs89]

Do you have any suggestions if this is possible to be accomplished by Pro? If not, I have to rebuild the site with a custom theme.

[tristup]

Hi @Pbalazs89,

Unfortunately, there is no option is not available right now. Alternatively, you can use the Modal which can be opened by clicking the Button. Please find the following thread which may help you with this.

How do I make a dual button where button 1 triggers modal popup

Hello @duncmoran, Thanks for writing in! I have checked your page and I can see that you are using the Ultimate Addon Cornerstone plugin. This is a 3rd party plugin, therefore, you will have to contact the creators of this plugin to be able to make it work. Meanwhile, if you want to trigger the content modal element popup, just make sure to add a Toggle Hash properly and use it as your link URL. For example, your hash is my-modal, in your button URL, you can insert #my-modal as your link URL. …

Make button trigger modal, but only upon click (not at pageload)

Hi there. As you know, I would like to use a button to trigger a modal, because the button allows different styling options than the modal toggle itself (such as adding animated graphics in combination with text in the toggle). I am not sure I understand your comment: “If you refresh the page, it will take the current URL where the #test is added due to the button click.” I am aware of the fact that the modal is triggered - this is the very reason for my ticket. But whereas the modal is trig…

Lightbox Video Integrity Pro

Hi @eeandtee, To add an image instead of hamburger follow the following steps. Go to Content area modal -> Toggle. Then off the Text Setup. Then on the Graphic Setup and choose the image icon. Then add the image at Primary Graphic Image option. [Content-Draft-Content-X] Hope it helps. Thanks

Thanks