Tell us what you are trying to do?
I want to create a tab using the info in the repeatable fields. I have attached the fields to the ticket. I want the field "Ciudad" as a title of the tab and the field "Fechas y horarios" as a content of the tab. I want to display the tab inside a WC product template managed by Elementor.
Is there any documentation that you are following?
I have tried to do it with the Bootstrap markup guide that Toolset suggests when creating the view. I know Elementor it's not compatible with Bootstrap, so I have also tried with basic HTML and JS suggested by w3schools.com
Is there a similar example that we can see?
I know it's very basic but something like that hidden link
And then I will put the style in CSS.
What is the link to your site?
Here's the link to my product page. The section I am trying to display with a tab is "Ciudades y horarios" hidden link
Thanks!
Hi Pablo,
Thank you for contacting us and I'll be happy to assist.
Although 1-1 code customization assistance is beyond the scope of support that we provide, we do our best to guide in the right direction, whenever possible.
To generate the HTML markup in the format needed for the tabs ( hidden link ), you have two options:
1. Views only:
Since the HTML for the tabs is divided into two segments ("Tab links" & "Tab content"), You can make a duplicate of your existing view that is being used for the "Ciudades y horarios" section.
The first or existing view can be used to generate the buttons inside the div with class "tab" and the duplicate copy can be used to generate each tab's content.
2. PHP code that uses "Post Relationships API":
If you're comfortable with PHP code, you can alternatively create a custom shortcode ( ref: https://codex.wordpress.org/Shortcode_API ), that can programmatically generate the HTML markup in the desired format, using the "toolset_get_related_posts" function.
( ref: https://toolset.com/documentation/customizing-sites-using-php/post-relationships-api/#toolset_get_related_posts )
Note: For a more personalized assistance around custom code, you can also consider hiring a professional from our list of recommended contractors:
https://toolset.com/contractors/
I hope this helps! Please let me know if you have any questions about these suggestions.
regards,
Waqar
Hi Waqar! And thanks for your awesome support 🙂
After a few attempts and with your help, I found the solution implementing the option 1. Finally, I will tell you, and maybe someone who is searching for the same, how I achieved that.
1- Create a view that displays the buttons in the tab. Wrap the loop in the "tab" class and the template in the <button> selector and "tablinks" class.
2- Create a view that displays the content of the tabs. In the loop, delete the default shortcode and place the content you want to display inside the tab with the proper HTML. One thing I didn't know is that you can generate dinamically IDs for the selectors placing the field shortcode inside the "". Awesome!
3- Create a third view that displays view 1 and 2. Add the javascript to the template.
4- Insert the third view in the product template with Elementor. I have to limit the results to 1 overriding the Toolset View settings with the Elementor widget because if I didn't, the tab was displayed multiple times. I don't know why but it works :'D
And there is a super tab displaying repeatable fields! (I'm proud :D)