Rails 4 - dynamically populate bootstrap tabs - ruby-on-rails

Question

I am trying to make a set of tab content fields in my Rails 4 app.
I have a problem because I want the first tab to be displayed (and then the others display as you click through them).
I have 6 tab placeholders, which might be used, depending on whether an attribute is marked as true or false. If one attribute is false, then there is one fewer tab.
If the content that is lined up in the first tab belongs to the attribute which is false, I can't figure out how to make the first tab display (without needing to first click on it).
For example, the first to tabs are below:
<div class="dp-tab-1">
<ul class="dp-tab-list row" id="myTab">
<% if #project.package.has_background_ip == true %>
<li class="col-md-2 col-xs-6 active" >
<a href="#tab-content-first">
<span class="glyph-item" data-icon=""></span>
<span>BACKGROUND INTELLECTUAL PROPERTY</span>
</a>
</li>
<% end %>
<li class="col-md-2 col-xs-6">
<a href="#tab-content-second">
<div class="glyph-item" data-icon=""></div>
<span>DATA</span>
</a>
</li>
The content for those two tabs is:
<div class="dp-tab-content tab-content">
<div class="tab-pane row fade in active" id="tab-content-first">
<% if #project.package.has_background_ip == true %>
<div class="col-md-6 text-center">
<%= image_tag(#project.package.background_ip.bip_image, :class=>"wow fadeInLeft img-responsive", :alt=>"123") %>
</div>
<div class="col-md-6">
<div class="tab-inner">
<h4>EXISTING INTELLECTUAL PROPERTY</h4>
<p class='medium-text'>
<%= render 'projects/bipparticulars' %>
</p>
<br/>
<a class='btn btn-danger btn-line'>CHECK THESE IP TERMS</a>
</div>
</div>
<% end %>
</div>
<div class="tab-pane row fade" id="tab-content-second">
<div class="col-md-6">
<div class="tab-inner">
<h4>DATA</h4>
<p class='medium-text'>
<%= render 'projects/dataparticulars' %>
</p>
<br/>
<% if #project.package.datum.survey_link == true %>
<a class='btn btn-danger btn-line'>SURVEY</a>
<% end %>
<% if #project.package.datum.confidential == true %>
<a class='btn btn-danger btn-line'>PROPOSED NDA</a>
<% end %>
</div>
</div>
<div class="col-md-6">
<%= image_tag(#project.package.background_ip.bip_image, :class=>"wow fadeInUp img-responsive", :alt=>"123") %>
</div>
</div>
The first tab has:
<% if #project.package.has_background_ip == true %>
If that attribute is true, then the tab displays and everything works fine.
If that attribute is not true, then the tab does not display and everything else works fine, EXCEPT that the second tab does not show its content automatically - i first have to click on the tab to reveal its content.
I want the first true tab to have its contents on display.
How can I achieve that?

Answer 1

You should set active class for the second tab to be selected automatically in order to show content :
<div class="dp-tab-content tab-content">
<div class="tab-pane row fade in <%= project.package.has_background_ip == true ? 'active' : '' %>" id="tab-content-first">
<% if #project.package.has_background_ip == true %>
<div class="col-md-6 text-center">
<%= image_tag(#project.package.background_ip.bip_image, :class=>"wow fadeInLeft img-responsive", :alt=>"123") %>
</div>
<div class="col-md-6">
<div class="tab-inner">
<h4>EXISTING INTELLECTUAL PROPERTY</h4>
<p class='medium-text'>
<%= render 'projects/bipparticulars' %>
</p>
<br/>
<a class='btn btn-danger btn-line'>CHECK THESE IP TERMS</a>
</div>
</div>
<% end %>
</div>
<div class="tab-pane row fade <%= project.package.has_background_ip == false ? 'active' : '' %>" id="tab-content-second">
<div class="col-md-6">
<div class="tab-inner">
<h4>DATA</h4>
<p class='medium-text'>
<%= render 'projects/dataparticulars' %>
</p>
<br/>
<% if #project.package.datum.survey_link == true %>
<a class='btn btn-danger btn-line'>SURVEY</a>
<% end %>
<% if #project.package.datum.confidential == true %>
<a class='btn btn-danger btn-line'>PROPOSED NDA</a>
<% end %>
</div>
</div>
<div class="col-md-6">
<%= image_tag(#project.package.background_ip.bip_image, :class=>"wow fadeInUp img-responsive", :alt=>"123") %>
</div>
</div>
Hopefully! It will help.