CSS Tabs Malfunction

[Reinhardt]

I've used a tab system to portray certain info in one of my QLs. It worked on the first post, but on the following one it seemed to have gotten an error. Please check the tab out for yourself.

The moment you choose the second tab, it is not highlighted, despite it being "checked". Not only that, but doing so also prevents you to return to the first tab, therefore, rendering the tabbed info useless. Refreshing the page only makes it go back to its initial form, but the same thing still happens. I've checked the code and I have done no change to it. Maybe this is just a bug, or am I missing something?

 

[Fable]

Hello there,


I just did a quick test and believe the issue is conflicting CSS.  I copy and pasted both of your codes in the same order in two separate posts and replicated the problem.  Upon removing the first post, the second post's tabs worked as they should.  Please considering creating unique div classes for "containment" on these posts.  This is strange behavior though, and I'm not the best to deal with tabs since I avoid them here on RPN.

 

[Nano]

Took a quick look at the code just now, and it's an issue with the the div IDs you used for the tabs (the CSS itself is fine since the tabs are the same style). Since the tabs are on the same page, you have to choose different div id/group names or the two sets of tabs will clash and "break". To fix this, you just have to give them different names such as using "tab-1" and "group-1" for the first set as you're doing right now and changing the second tab set's to "tab-1b" and "group-1b".


Note: "label for=" should always have the same name as "div id=" for that tab.

 

[Reinhardt]

I see. So two tabs in the same page, at different posts will be contradicting each other, hence, causing the malfunction. I guess I learned a new thing today.

Thanks for the help everyone.