Active tab problem

Questions
1

Hello everybody

I find it hard du explain my problem but I will try anyway :-)

I need a solution where some information has to be shown as tabs like the picture below:

The problem is that my CSS has to use active tab class on the active tab and a inactive class on the tabs which is not selected. See HTML below (This HTML is what i need the Razor script to do):

<div class="tabbable tabs-left">
	<ul class="nav nav-tabs">
	   <li class="active"><a href="#tab1" data-toggle="tab">Tab1</a></li>
	   <li><a href="#tab2" data-toggle="tab">Tab2</a></li>
	</ul>
	<div id="myTabContent" class="tab-content">
	<!--tab 1-->
        <div class="tab-pane fade in active" id="tab1">
	   <img src="img/small/s8.jpg" class=" pull-left" alt="Image" title="Image" />
	   <h6><span>Made for everyone</span> and packed with features</h6>
	   <p>Sleek, intuitive, and powerful front-end framework for faster.</p>
	</div>
	<!--tab 2-->
        <div class="tab-pane fade" id="tab2">
	   <img src="img/small/s8.jpg" class=" pull-left" alt="Image" title="Image" />
	   <h6><span>Made for everyone</span> and packed with features</h6>
	   <p>Sleek, intuitive, and powerful front-end framework for faster.</p>
        </div>
    </div>
</div>

And my razor looks like this where most of it is working, but I dont know how to make the active class working.

<div class="container wrapper">
<div class="inner_content">
<div class="pad30"></div>
<div class="row">

@foreach (var info in @Model.Children.Where("Visible"))
{
<div class="center">
<div class="tabbable tabs-left">
<ul class="nav nav-tabs">
@*<li class="active"><a href="#tab1" data-toggle="tab">Tab1</a></li>
<li><a href="#tab2" data-toggle="tab">Tab2</a></li>*@
<li><a href="#@info.id" data-toggle="tab">@info.header</a></li>
</ul>
</div>
</div> 
} 

@foreach (var page in @Model.Children.Where("Visible"))
{
<div class="tab-pane fade in active" id="@page.id">
<div class="span8 offset2"><h1 class="post_intro center">@page.header</h1>
<div class="pad30"></div>
<div class="post">
<img src="img/small/s8.jpg" class=" pull-left" alt="Image" title="Image" />
<div class="pad30"></div>     
<p>@page.description</p>
<h4 class="grey2"><i class="icon-quote-left icon-3x pull-left colour marg-left5"></i>@page.descriptionQuote</h4>
<div class="pad25"></div>
</div>
</div>
</div>
}
</div>
</div>
</div>

Thanks in advance!

//René

This is a companion discussion topic for the original entry at https://our.umbraco.com/forum/41296-active-tab-problem