Nav tabs with if statments - tabs

Question

I have bootstrap nav taps working with if statements to dynamically fill content. What I am trying to accomplish is have the tabs fade state switched to active (expanded) if the if condition is meet. Right now "Green" shows active and I can click the other tabs just fine to expose the content. So if Green has no content, show Red, if Red has no content show Yellow. This would all be on first page visit with the content expanded.
There will always be content in Yellow, Orange and Blue.
I am struggling with how to best approach this? Any hints would be appreciated.
Sorry don't know how to include if statements with jfiddle. jfiddle
<ul id="tabs" class="nav nav-tabs nav-fill">
{ if green }
<li class="active nav-item"><a data-toggle="tab" href="#1">Green</a></li>
{ endif }
{ if red }
<li class="nav-item"><a data-toggle="tab" href="#2">Red</a></li>
{ endif }
<li class="nav-item"><a data-toggle="tab" href="#3">Yellow</a></li>
<li class="nav-item"><a data-toggle="tab" href="#4">Orange</a></li>
<li class="nav-item"><a data-toggle="tab" href="#5">Blue</a></li>
</ul>
<div class="tab-content">
<div id="color-featured" class="tab-pane active">
<div class="color-tab-item">
{ if green }
<div>{green}</div>
{ endif }
</div>
</div>
<div id="2" class="tab-pane fade">
{ if red }
<div class="red"> {red}</div>
{ endif }
</div>
<div id="3" class="tab-pane fade">
<div class="yellow"> {yellow}</div>
</div>
<div id="4" class="tab-pane fade">
{orange}
</div>
<div id="5" class="tab-pane fade">
{blue}
</div>
</div>