Hello,
I am working on Tab Brics… and by default, the first tab is on the “Active” state.
However, is there any way in Blocs I can change the “Active” class to the 2nd or 3rd tab?
Thanks.
The thing about tabs is that they provide a sort of logical way to present data to an audience that tends to work in a logical sequence. When people see tabs, they tend to explore them in the order in which they are presented. i.e. from right to left in most cultures and from left to right in others. Therefore, having a tab somewhere in the middle being the active tab, or first tab in the sequence, is like presenting a book with its cover in the middle. I think it would be better to simply use tab 1 to present the information you would like the audience to see first. If that information happens to be on tab 2 or 3, then move it to the tab 1 position. Unless I’m missing something, I can think of no reason why tabs should be presented out of natural sequence when first viewed. If there is some reason, maybe you could explain why you need this feature. Someone may then come along and advise you on how you can achieve this through directly editing some code.
@hendon52 wow! Really…
Anyway @karenKT , it can be any tab depending how you want your design to work.
That being said, I can’t see anywhere with the built in Tab Bric that allows you to set this, so you could either edit the code after export or you could use a Code Block and use your own code.
You will find Bootstrap 4 tabs example code towards the bottom of the following docs.
I was looking for this answer aswell but seems a little crazy to have to do this outside of Blocs. Hope that they are able to add this feature in the future releases.
You don’t have to do this outside of Blocs.
You can add some code to the page header, to replicate the tab being clicked, so the tab you want is active.
Replace the nav-20765-tab-2 with the ID of the tab link you want active.
<script>
document.addEventListener("DOMContentLoaded", function() {
document.getElementById("nav-20765-tab-2").click();
});
</script>