how to work horizontal and vertical tab together

Hello,I was working on css framework bootstarp, Actually I was working on tabs,I want vertical tab on left,and horizontal on the top of web page,I m having problem when we click horizontal tab,the content vertical tab should hide and vice-verse,Please help me to slove this problem.
Below I attached my code....

 

Hi sangeetha,

I'm not familiar with bootstrap, but it's pretty easy to do it if you include jQuery.

Just add the following code somewhere in your head tag (of course you need to have jquery library in the js folder):

<script src="js/jquery-1.9.1.min.js"></script>
<script>
$(document).ready(function(){
  $("ul.nav.nav-tabs:eq(0) a").click(function () {
    event.preventDefault();
    $("div#sa").css("display", "block");
    $("div#saa").css("display", "none");
  });
  $("ul.nav.nav-tabs:eq(1) a").click(function () {
    event.preventDefault();
    $("div#sa").css("display", "none");
    $("div#saa").css("display", "block");
  });
});
</script>

Code (markup):

And fix one of your <div>-s to be closed properly - <div id="sa"> should be closed like </div> before <div class="tabbable tabs-left">

That will make the contents of the left tabs to hide when you click one of the top tabs, and the contents of the top tabs to hide when you click one of the left tabs like in the attached screenshots.
Of course you're able to show/hide different portions of your screen by changing the selector "div#sa" and "div#saa".
The full example is attached as index-sitesten.html

 

hello sir,I tried with what u have told with,but still I am getting same problem,when i click top tab,it is not visible in the front,like vice verse.
I have attached screen shot,Please help me to sort out this problem

 

I can see you made modifications. Send me the updated source.

 

Here is html code

 

I can see there was a problem with the code I provided in Firefox and IE as I placed preventDefault() in front which caused the rest of the functions not to be executed. I also wrapped the whole top tab in a new div of class "tabbable" and added two new css classes "my-top" and "my-left" in order to make it easier to identify these. Hope this works for you. If I misunderstood the task, please provide me some details and updated code.

 

Thank you sir,I tried with adding two divs left and top,its working fine,but i have one more question to ask,
when i click top tab,left tab content will be hidden,but left tab remains active.how to disable the left tab when i click top tab.and vice verse.....Please help me to sort out this....

 

You can see there are two functions responsible for hiding/showing contents:

$("div.tabbable.my-top a").click(function () {
  $("div#sa").css("display", "block");
  $("div#saa").css("display", "none");
  event.preventDefault();
});
$("div.tabbable.my-left a").click(function () {
  $("div#sa").css("display", "none");
  $("div#saa").css("display", "block");
  event.preventDefault();
});

Code (markup):

Each function contains a jQuery CSS selector.
"div.tabbable.my-top a" means the function will be applied to all the <A> elements that are child of a <DIV> of class "tabbable" and "my-top".
"div.tabbable.my-left a" means the function will be applied to all the <A> elements that are child of a <DIV> of class "tabbable" and "my-left".

Each function contains two additional CSS selectors:
"div#sa" simply applies on a <DIV> with ID "sa"
"div#saa" simply applies on a <DIV> with ID "saa"

So within the first function we're changing the DIV with ID "sa", CSS attribute "display" to become "none". That hides it. Then by setting the "display: block" on the DIV with ID "saa" we show the contents of the "saa" DIV.

The next function does the opposite.

If you need to hide/show something else you can write a similar selector and hide/show it by manipulating the "display".

Since I wrapped the whole top tabs with all its contents in a:

<div class="tabbable my-top">

Code (markup):

block you can easily hide/show it with the following selector: "div.tabable.my-top"

And for the left tabs wrapped in:

<div class="tabbable tabs-left my-left" id="left-tab">

Code (markup):

you can use "div.tabbable.my-left"

Finally you can rewrite the above functions like:

$("div.tabbable.my-top a").click(function () {
  $("div.tabbable.my-top").css("display", "block");
  $("div.tabbable.my-left").css("display", "none");
  event.preventDefault();
});
$("div.tabbable.my-left a").click(function () {
  $("div.tabbable.my-top").css("display", "none");
  $("div.tabbable.my-left").css("display", "block");
  event.preventDefault();
});

Code (markup):

That will do the job you want, so try it in practice.

Still I don't believe it will be quite practical as once you "hide" the top or left tabs you won't be able to bring them back, since they're hidden. Anyway probably you have something else in mind. Let me know if I can further help you.

 

Thank you sir,

Actually I think you dint get my question,whatever you provided in the index-sitesten-2.html is what i was acecpting.In that code one problem i.e when i click any top tab,the content of that particular tab is shown,after clicking top tab if i click left tab the content of left tab is shown even that is working fine,but problem is that when i click left tab,last clicked top tab content div is hidden but top tab is active,how to disable the top tab active when we click left tab......and vice verse


Plesae help sort this problem....