How to switch through tabs in bulma
You should separate the tabs and the tab content into separate containers. You can match a tab to the correct content using the data
attribute.
Set the tab content to be hidden by default, unless it has the class active
. When you click on a tab, the corresponding tab content receives active
.
You can update the fiddle/snippet below with more appropriate elements and class/id names as you need.
fiddle
$(document).ready(function() {
$('#tabs li').on('click', function() {
var tab = $(this).data('tab');
$('#tabs li').removeClass('is-active');
$(this).addClass('is-active');
$('#tab-content p').removeClass('is-active');
$('p[data-content="' + tab + '"]').addClass('is-active');
});
});
#tab-content p {
display: none;
}
#tab-content p.is-active {
display: block;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.6.1/css/bulma.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="tabs is-toggle is-fullwidth" id="tabs">
<ul>
<li class="is-active" data-tab="1">
<a>
<span class="icon is-small"><i class="fa fa-image"></i></span>
<span>Pictures</span>
</a>
</li>
<li data-tab="2">
<a>
<span class="icon is-small"><i class="fa fa-music"></i></span>
<span>Music</span>
</a>
</li>
<li data-tab="3">
<a>
<span class="icon is-small"><i class="fa fa-film"></i></span>
<span>Videos</span>
</a>
</li>
<li data-tab="4">
<a>
<span class="icon is-small"><i class="fa fa-file-text-o"></i></span>
<span>Documents</span>
</a>
</li>
</ul>
</div>
<div id="tab-content">
<p class="is-active" data-content="1">
Pictures
</p>
<p data-content="2">
Music
</p>
<p data-content="3">
Videos
</p>
<p data-content="4">
Documents
</p>
</div>
Example without jQuery
const TABS = [...document.querySelectorAll('#tabs li')];
const CONTENT = [...document.querySelectorAll('#tab-content p')];
const ACTIVE_CLASS = 'is-active';
function initTabs() {
TABS.forEach((tab) => {
tab.addEventListener('click', (e) => {
let selected = tab.getAttribute('data-tab');
updateActiveTab(tab);
updateActiveContent(selected);
})
})
}
function updateActiveTab(selected) {
TABS.forEach((tab) => {
if (tab && tab.classList.contains(ACTIVE_CLASS)) {
tab.classList.remove(ACTIVE_CLASS);
}
});
selected.classList.add(ACTIVE_CLASS);
}
function updateActiveContent(selected) {
CONTENT.forEach((item) => {
if (item && item.classList.contains(ACTIVE_CLASS)) {
item.classList.remove(ACTIVE_CLASS);
}
let data = item.getAttribute('data-content');
if (data === selected) {
item.classList.add(ACTIVE_CLASS);
}
});
}
initTabs();
#tab-content p {
display: none;
}
#tab-content p.is-active {
display: block;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.6.1/css/bulma.css" rel="stylesheet" />
<div class="tabs is-toggle is-fullwidth" id="tabs">
<ul>
<li class="is-active" data-tab="1">
<a>
<span class="icon is-small"><i class="fa fa-image"></i></span>
<span>Pictures</span>
</a>
</li>
<li data-tab="2">
<a>
<span class="icon is-small"><i class="fa fa-music"></i></span>
<span>Music</span>
</a>
</li>
<li data-tab="3">
<a>
<span class="icon is-small"><i class="fa fa-film"></i></span>
<span>Videos</span>
</a>
</li>
<li data-tab="4">
<a>
<span class="icon is-small"><i class="fa fa-file-text-o"></i></span>
<span>Documents</span>
</a>
</li>
</ul>
</div>
<div id="tab-content">
<p class="is-active" data-content="1">
Pictures
</p>
<p data-content="2">
Music
</p>
<p data-content="3">
Videos
</p>
<p data-content="4">
Documents
</p>
</div>
Another solution without the need of data attributes (using index).
HTML:
<div class="column is-12 tabs is-medium">
<ul>
<li class="is-active"><a>Tab 1</a></li>
<li><a>Tab 2</a></li>
</ul>
</div>
<div class="column is-12 tabs-content">
<div class="tab-content is-active">
<p>Content 1</p>
</div>
<div class="tab-content">
<p>Content 2</p>
</div>
</div>
JS (jQuery):
$('.tabs').each(function(index) {
var $tabParent = $(this);
var $tabs = $tabParent.find('li');
var $contents = $tabParent.next('.tabs-content').find('.tab-content');
$tabs.click(function() {
var curIndex = $(this).index();
// toggle tabs
$tabs.removeClass('is-active');
$tabs.eq(curIndex).addClass('is-active');
// toggle contents
$contents.removeClass('is-active');
$contents.eq(curIndex).addClass('is-active');
});
});
SCSS:
.tab-content {
display: none;
&.is-active {
display: block;
}
}