My implementation using Twitter Bootstrap's bootstrap-tab.js includes:
<ul class="tabnavcenter" id="myTab">
<li class="active"><a href="#home" data-toggle="tab">about</a></li>
<li><a href="#tab2" data-toggle="tab">education</a></li>
<li><a href="#tab3" data-toggle="tab">experience</a></li>
<li><a href="#tab4" data-toggle="tab">verified skills</a></li>
<li><a href="#tab5" data-toggle="tab"> video</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="home">Content 1</div>
<div class="tab-pane" id="profile">...</div>
<div class="tab-pane" id="messages">...</div>
<div class="tab-pane" id="settings">...</div>
</div>
I am looking for a solution to display different content in two places in a profile, one above and one below a navbar, without the content disappearing when it's clicked on. Is it possible to have two "active" list items simultaneously?
Upon further examination:
Within a Rails 3.2 App, the bootstrap-tab.js file contains the following code:
$('#myTab a').click(function (e) {
e.preventDefault();
$(this).tab('show');
})
$('#myTab a[href="#home"]').tab('show');
$('#myTab a[href="#tab2"]').tab('show');
$('#myTab a[href="#tab3"]').tab('show');
$('#myTab a[href="#tab4"]').tab('show');
$('#myTab a[href="#tab5"]').tab('show');
$('#myTab a[href="#home2"]').tab('show');
$('#myTab a[href="#tab22"]').tab('show');
After adding the following script in user_body.html.erb:
<script type="text/javascript">
$(function () {
$('#myTab >li>a').on('click', function (e) {
e.preventDefault();
$(this).tab('show');
//
$(this.getAttribute('href') + '2').html($(this).html());
});
});
Upon refreshing the page, the second content appears in the div. However, there is no change when clicking on the second tab. Additionally, clicking back on the first tab reverts the name back to the first 'a' element. It's quite a mess.