I'm trying to figure out how to display tab content in my Rails 4 app.
I recently asked this question - the purpose of which was to figure out how to set the active tab, based on whether an attribute was set to true or false. By incorporating the solution outlined in that post (link below), I've created a new problem.
Rails 4 - how to designate active tab to first instance of a true condition
Now - when I try to render the page, if the first tab attribute is not true, the next tab has the active display on it, but the content for that tab is only revealed once I click on the the tab label.
These are my tabs:
<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' if firstActiveTab == 1 %>" >
<!-- <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 %>
<% if @project.package.has_data == true %>
<li class="col-md-2 col-xs-6 <%= 'active' if firstActiveTab == 2 %>" >
<!-- <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>
<% end %>
<% if @project.package.has_funding == true %>
<li class="col-md-2 col-xs-6 <%= 'active' if firstActiveTab == 3 %>" >
<!-- <li class="col-md-2 col-xs-6"> -->
<a href="#tab-content-third">
<div class="glyph-item" data-icon=""></div>
<span>FUNDING</span>
</a>
</li>
<% end %>
<% if @project.package.has_materials == true %>
<li class="col-md-2 col-xs-6 <%= 'active' if firstActiveTab == 4 %>" >
<!-- <li class="col-md-2 col-xs-6"> -->
<a href="#tab-content-fourth">
<div class="glyph-item" data-icon=""></div>
<span>MATERIALS</span>
</a>
</li>
<% end %>
These are the corresponding tab contents:
<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 PROPERTY</h4>
<p class='medium-text'>
<%= render 'projects/bipparticulars' %>
</p>
<br/>
<a class='btn btn-danger btn-line'>CHECK THESE 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 %>
</div>
</div>
</div>
<div class="tab-pane row fade" id="tab-content-third">
<div class="col-md-6">
<div style="position: relative">
<!-- <img src="images/mockup2a.png" class='wow slideInLeft img-responsive' style='position: absolute;left: 0px; bottom: 0; max-width: 80%;' data-wow-delay='0.1s' alt=""/> -->
<!-- <img src="images/mockup2.png" class='wow slideInLeft img-responsive' style='padding-left: 60px;' alt=""/> -->
</div>
</div>
<div class="col-md-6">
<div class="tab-inner">
<h4>FUNDING</h4>
<p class='medium-text'>
<%= render 'projects/fundingparticulars' %>
</p>
<br/>
<a class='btn btn-danger btn-line'>PROPOSED TERMS</a>
<!-- btn-primary -->
</div>
</div>
</div>
<div class="tab-pane row fade" id="tab-content-fourth">
<div class="col-md-6">
<div class="tab-inner">
<h4>EQUIPMENT & MATERIALS</h4>
<p class='medium-text'>
<%= render 'projects/materialsparticulars' %>
</p>
<br/>
<a class='btn btn-danger btn-line'>PROPOSED TERMS </a>
</div>
</div>
<div class="col-md-6">
<%= image_tag(@project.package.background_ip.bip_image, :class=>"wow fadeInUp img-responsive", :alt=>"123") %>
</div>
</div>
If background IP is not true, has_data is true, then the tab setting correctly shows the data tab as active, but the content of that tab does not display until I click on the data tab. By contrast, if the background_ip attribute is true, then the page displays correctly, with the tab content for background ip displayed.
The difference is that 'active' is included in the styling for the background ip tab content. But that's only correct as long as the attribute is set to true.
I tried adding the logic <%= 'active' if firstActiveTab == 1 %> to the tab contents panels, but it didn't work.
Can anyone see what I now need to do in order to have my tab content display for the active tab?
