Sie Sie - 19 days ago 6
CSS Question

JQueryUI Vertical tabs - The JS for tabs-functionality stopped working after a few (apparently irrelevant) CSS styles were added

JsFiddle here

I am trying to create JQueryUI Vertical tabs using the example given here.

There are some CSS styles in the source given on the page I have linked:

.ui-tabs-vertical { width: 55em; }
.ui-tabs-vertical .ui-tabs-nav { padding: .2em .1em .2em .2em; float: left; width: 12em; }
.ui-tabs-vertical .ui-tabs-nav li { clear: left; width: 100%; border-bottom-width: 1px !important; border-right-width: 0 !important; margin: 0 -1px .2em 0; }
.ui-tabs-vertical .ui-tabs-nav li a { display:block; }
.ui-tabs-vertical .ui-tabs-nav li.ui-tabs-active { padding-bottom: 0; padding-right: .1em; border-right-width: 1px; }
.ui-tabs-vertical .ui-tabs-panel { padding: 1em; float: right; width: 40em;}


When I do not add these CSS styles, the tabs work properly, but they appear HORIZONTALLY.

So I copied those styles into a
styles.css
, and included this CSS file in my page's
<head>
tag. As a result, the tabs Do appear VERTICALLY, but THEY NO LONGER WORK. That is, clicking on a tab header does not show its content.

The question is why and how do I fix this?

Answer

It's working when you clicking on text because it was not content full width of li

li a get the default css so you need to overwrite this:

.ui-tabs .ui-tabs-nav .ui-tabs-anchor{
    display: block;
    float:none !important
}

Working Demo: https://jsfiddle.net/op22ezxe/1/