อยากทราบวิธีการทำ Tab Jquery แบบแนวตั้งอ่ะค่ะ ไม่ทราบว่าต้องทำยังไงคะ

<style>
.leftBox{
width:300px;float:left;position:relative;border:1px solid #aaa;
}

.insideLeft{
 position:absolute;top:0;left:0;display:none;
}

.rightBox{
 width:100px;float:left;border:1px solid #aaa;
}
.rightBox a{
  display:block; line-height:30px;border:1px solid #000;
}

</style>
<script>
$(function(){
   $(".rightBox a").click(function(){
      $x = $(this).attr('rel');
     $(".insideLeft").hide(100,function(){
    $($x).show()});
      
   })
})
</script>
<div class="leftBox">
 <div class="insideLeft" id='a1' style="display:block"></div>
 <div class="insideLeft" id='a2'></div>
 <div class="insideLeft" id='a3'></div>
</div>

<div class="rightBox">
<a href="javascript:void(0)" rel="#a1"> box 1</a>
<a href="javascript:void(0)" rel="#a2"> box 2</a>
<a href="javascript:void(0)" rel="#a3"> box 3</a>
</div>

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<style>
.leftBox{
width:300px;float:left;position:relative;border:1px solid #aaa;
}

.insideLeft{
 position:absolute;top:0;left:0;display:none;height:300px;width:100%;
}

.rightBox{
 width:100px;float:left;border:1px solid #aaa;
}
.rightBox a{
  display:block; line-height:30px;border:1px solid #000;
}

</style>
<script>
$(function(){
   $(".rightBox a").click(function(){
      $x = $(this).attr('rel');
     $(".insideLeft").hide(10,function(){
    $($x).show()});

   })
})
</script>
<div class="leftBox">
 <div class="insideLeft" id='a1' style="display:block; background:green">asdasd</div>
 <div class="insideLeft" id='a2' style="background: blue">asdasd</div>
 <div class="insideLeft" id='a3' style="background: red">asdasd</div>
</div>

<div class="rightBox">
<a href="javascript:void(0)" rel="#a1"> box 1</a>
<a href="javascript:void(0)" rel="#a2"> box 2</a>
<a href="javascript:void(0)" rel="#a3"> box 3</a>
</div>