Columns in tab element

Support
#1

Hello,

I tried to add columns into a tab element, but it doesn’t display correctly. What do I need to change?
I used the following code:

[cs_row marginless_columns="false"]
	[column type="1/2"] Here is column #1 [/column]
	[column type="1/2" last="true" fade="true" fade_animation="in" fade_animation_offset="45px"] <img src="https://neowebsite.io/wp-content/uploads/2018/12/modeles-creation-site-internet-wordpress.jpg" alt="modèles de création de site internet>[/column]
[/cs_row]

URL: https://neowebsite.io/comment-ca-marche/ (first tab on the page, in the second section)

Thanks,
Antoine

#2

Hey Antoine,

Please use the old structural shortcodes nested as follows if you’re going to use wrap and contain the columns.

It would also be best to omit spaces.

Hope that helps.

#3

Do you mean I should use the v1 tab element, instead of the v2?

I tried with the following code but I still have the same problem:

[content_band][container]
[column type="1/2"] Here is column #1 [/column]
[column type="1/2" last="true" fade="true" fade_animation="in" fade_animation_offset="45px"] <img src="https://neowebsite.io/wp-content/uploads/2018/12/modeles-creation-site-internet-wordpress.jpg" alt="modèles de création de site internet>[/column]
[/container][/content_band]
#4

Hi Antoine,

Yes, please use the classic shortcode. I checked and it seems to be working,

Or you mean the tabs navigation aren’t clickable? If yes then it’s because of the section added above it and it covers the content below it.

Thanks!

#5

Thanks for the clarification. It is not working though. I tested it before I posted my previous message.
I added it back at the top of the page. As you can see, the content of the second tab (and the content below it) is mixted with the first tab.

What should I change to make it works correctly?

Thanks,
Antoine

#6

Hi Antoine,

Please make sure the attributes are properly closed with quotes,

alt="modèles de création de site internet></div>

should be like this

alt="modèles de création de site internet"></div>

Make sure other contents are properly formed. What happened is, the elements are broken and those texts appear to be outside the tabs. It’s not actually mixed with the first tab.

Thanks!

#7

Oh, thank you. Stupid me, I should pay more attention to this kind of mistake. I tried it with the v2 tab element and it works just fine as well.

Is it possible to link from one tab to another? How?
I have seen data-x-toggleable="tab-item-41" and aria-labelledby="tab-41" but I have no idea how to link to this.

Thanks,
Antoine

#8

Hello Antoine,

Thanks for updating the thread.

Please take a look at the solution mentioned in following thread.

Thanks.

#9

Thank you for the info. I am not sure to the correct way to use it though. I added the code you provided in the JS section, which I guess should now allow me to make a like using href? Could you please tell me more about it?

Thanks,
Antoine

#10

Hey Antoine,

If the solution above is not working for you, you need to contact to a 3rd party developer to help you with this, because it would require custom development that would fall beyond the scope of our support.

Thank you for understanding.

#11

I’m not saying the solution is not working, I am simply asking how to use it :slight_smile:

I added the JS code, but I now need to create the link to one specific tab. How do I do this? Could you please provide an example like <a href="#" aria-labelledby="tab-41">link to tab-41</a> (which is incorrect but I don’t know how to do it)?

#12

Sorry for the confusion. Linking to a Tab does not require custom code but you need to use the V2 Tabs element. Here’s the setup.

1. Inspect each Tab item and assign a Toggle Hash.

2. In a text, link to the hash like <a href="#about">link to about tab</a>

Hope that helps.

#13

Thank you for the explanation and sorry for not being able to explain my need clearly enough.

#14

You’re welcome and no worries. Glad we’re able to help.

#15

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