jquery tabs dissapear when re-clicked

Question

Here is my test page (dont mind the layout right now)

https://www.bcidaho.com/test_kalyani/employer-plans-test.asp

i found something weird. if you click back and forth between tab 1 and tab 2, its fine.

if you click tab 3, and got to another tab, the content dissapears... and i can not figure out why???

I am boggled, and can not figure out why it does this.... is it a display:hide element in the CSS?

here is a link to the CSS file: https://www.bcidaho.com/css/employer.css

here is a link to the javascript files that i use: https://www.bcidaho.com/js/ui.toggle-employers.js https://www.bcidaho.com/js/tabbed-menu3.js

Answer 1

The way I see you are setting display for these tabs is via:

tab1: <div class="current"..
tab2: <div class="tab "..
tab3: <div class="tab "..

When you click on tab 2 it changes to

tab1: <div class="tab"..
tab2: <div class="tab current" ...
tab3: <div class="tab" ...

When you click back on tab 1 it changes to

tab1: <div class="tab current "...
tab2: <div class="tab" ...
tab3: <div class="tab" ...

But when you click on tab 3 I see:

tab1: <div clas="tab" ...
tab2: <div class="tab" ...
tab3: <div class="tab" ...

So I suspect that what is going on is that you need to make sure that when tab three i clicked that the "current" class is removed from the prior current class and then "added" to tab 3: