active tab problem

René Andersen 238 posts 684 karma points

May 27, 2013 @ 10:06

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é

Copy Link

Fuji Kusaka 2203 posts 4220 karma points

May 27, 2013 @ 10:14

HI Rene,

From your loop you are using in your code i assume you are using some node to represent the tabs right?

If so you can make use of a variable in your <div class="tab-pane ... ">

Try somthing like

@foreach(var page in @Model.Children.Where("Visible")){
string active = (p.IsAncestorOrSelf(@Model))? "active":"";
 <div class="tab-pane @active ">
}

Copy Link

René Andersen 238 posts 684 karma points

May 27, 2013 @ 11:52

Hi Fuji

Ahh I am not good at this :-)

I have made some minor changes to the Razor, see below:

@inherits umbraco.MacroEngines.DynamicNodeContext

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

 @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="@page.image" alt="" >
 <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 class="row">
 <div class="center">
 <div class="tabbable tabs-left">
 <ul class="nav nav-tabs">
 @foreach (var info in @Model.Children.Where("Visible"))
 { 
 <li><a href="#@info.id" data-toggle="tab">@info.header</a></li>
 } 
 </ul>
 </div>
 </div> 
 </div>
 </div>
</div>

Now this script generates this output with "class=tab-pane fade in active" on every loop:

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

 <div class="tab-pane fade in active" id="1124">
 <div class="span8 offset2"><h1 class="post_intro center">Opstart</h1>
 <div class="pad30"></div>
 <div class="post">
 <img src="/media/1034/image1.jpg" alt="" >
 <div class="pad30"></div> 
 <p>Some text</p>
 <h4 class="grey2"><i class="icon-quote-left icon-3x pull-left colour marg-left5"></i>Some text</h4>
 <div class="pad25"></div>
 </div>
 </div>
 </div>
 <div class="tab-pane fade in active" id="1125">
 <div class="span8 offset2"><h1 class="post_intro center">Efter opstart</h1>
 <div class="pad30"></div>
 <div class="post">
 <img src="/media/1035/image2.jpg" alt="" >
 <div class="pad30"></div> 
 <p>Some text</p>
 <h4 class="grey2"><i class="icon-quote-left icon-3x pull-left colour marg-left5"></i>Some text</h4>
 <div class="pad25"></div>
 </div>
 </div>
 </div>
 </div>

 <div class="row">
 <div class="center">
 <div class="tabbable tabs-left">
 <ul class="nav nav-tabs">
 <li><a href="#1124" data-toggle="tab">Opstart</a></li>
 <li><a href="#1125" data-toggle="tab">Efter opstart</a></li>
 </ul>
 </div>
 </div> 
 </div>
 </div>
</div>

I am still not sure where to put in the code you wrote in the last post. Could you please try to put it in my Razor code?

Thank you!

//René

Copy Link

Fuji Kusaka 2203 posts 4220 karma points

May 27, 2013 @ 12:00

Hi Rene,

Is this where the class = active should be <divclass="tab-pane fade in active"id="1124">?

If so add this here

<div class="tab-pane fade in @active" id="@page.id">

Copy Link

nandish 1 post 71 karma points

Feb 27, 2018 @ 17:01

Hi All,

Am facing same problem.

There are four tabs.

I want create multiple blog for each tab.

I found solution in http://www.umbtuts.net/tutorials/creating-a-simple-blog-in-umbraco-v7/

But how to create for remaining tabs. How to write razor code.

Can you please help....

Thanks Nandish

Copy Link

is working on a reply...

Flag this post as spam?

Active tab problem