0

I have a Jquery ui Vertical Tab which is working fine but i need to use it in my way and requirement. For the same i have to know how the Contents of the jquery ui tab body (With Body i mean the portion where Content of A, B etc are getting displayed in the fiddle) is getting changed .What and how to change the contents there with my DIV and Other HTML fields..

Here is the Script that has been used to handle that but i am not getting how this is changing the contents..

 <script type='text/javascript'>//<![CDATA[
    window.onload = function () {
        $('#tabs')
.tabs()
.addClass('ui-tabs-vertical ui-helper-clearfix');

    }//]]>  

</script>

and here is the Fiddle link..Fiddle

Please help me to resolve the issue..Thanks..

2 Answers 2

0

The identifier(s) you are looking for is #tabs & .ui-tabs-nav

Just set your desired height by css:

#tabs {
    height: 500px !important;
}

.ui-tabs-nav {
    height: 496px !important;
}

Updated JsFiddle


And by increasing height, I guess you want to fill the empty space with more tabs. Easily done:

<li><a href="#e">Tab E</a></li>

<div id="e">Content of E</div>

Updated JsFiddle 2

1
  • Thanks ..It Solved my first problem ..Now how the contents of the body is getting changed...Please read my Post Once again .I have updated my post ..
    – Shri
    Nov 7, 2014 at 13:05
0

To change the default height of your tab, edit the top/bottom padding in this rule:

.ui-tabs.ui-tabs-vertical .ui-tabs-nav li a {
    display: block;
    width: 100%;
    padding: 0.6em 1em; // edit 0.6em to whatever you need
}

Fiddle: http://jsfiddle.net/nn2Qw/3768/

As for your other question, the property aria-controls in each li, controls what content is shown.

1
  • Thanks ..It Solved my first problem ..Now how the contents of the body is getting changed...Please read my Post Once again .I have updated my post ..
    – Shri
    Nov 7, 2014 at 13:04

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.