How to make ajax-like tab switcher in Bulma CSS framework? How to make it in easy way? Or what framework should I use to solve this task?
Some text to bypass github error Some text to bypass github error Some text to bypass github error Some text to bypass github error
<link rel="stylesheet" href=".4.2/css/bulma.min.css" />
<link rel="stylesheet" href=".7.0/css/font-awesome.min.css" />
<div class="tabs is-centered">
<ul>
<li class="is-active">
<a>
<span class="icon is-small"><i class="fa fa-html5"></i></span>
<span>All</span>
</a>
</li>
<li>
<a>
<span class="icon is-small"><i class="fa fa-tablet"></i></span>
<span>Adaptive design</span>
</a>
</li>
<li>
<a>
<span class="icon is-small"><i class="fa fa-file-code-o"></i></span>
<span>jQuery</span>
</a>
</li>
<li>
<a>
<span class="icon is-small"><i class="fa fa-cog"></i></span>
<span>AJAX</span>
</a>
</li>
<li>
<a>
<span class="icon is-small"><i class="fa fa-file-text-o"></i></span>
<span>AngularJS</span>
</a>
</li>
</ul>
<!--/tabs is-centered-->
</div>How to make ajax-like tab switcher in Bulma CSS framework? How to make it in easy way? Or what framework should I use to solve this task?
Some text to bypass github error Some text to bypass github error Some text to bypass github error Some text to bypass github error
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.4.2/css/bulma.min.css" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
<div class="tabs is-centered">
<ul>
<li class="is-active">
<a>
<span class="icon is-small"><i class="fa fa-html5"></i></span>
<span>All</span>
</a>
</li>
<li>
<a>
<span class="icon is-small"><i class="fa fa-tablet"></i></span>
<span>Adaptive design</span>
</a>
</li>
<li>
<a>
<span class="icon is-small"><i class="fa fa-file-code-o"></i></span>
<span>jQuery</span>
</a>
</li>
<li>
<a>
<span class="icon is-small"><i class="fa fa-cog"></i></span>
<span>AJAX</span>
</a>
</li>
<li>
<a>
<span class="icon is-small"><i class="fa fa-file-text-o"></i></span>
<span>AngularJS</span>
</a>
</li>
</ul>
<!--/tabs is-centered-->
</div>5 Answers
Reset to default 13If I correctly understood your question you always want to stay on the same page while switching the tabs but have different contents on each "tab page". Please take a look at how I did it in the snippet below. There are probably more ways to do it though...
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.1/css/bulma.min.css" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
</head>
<body>
<div class="tabs is-centered">
<ul>
<li id="all-tab" class="is-active">
<a onClick="switchToAll()">
<span class="icon is-small"><i class="fa fa-html5"></i></span>
<span>All</span>
</a>
</li>
<li id="adaptivedesign-tab">
<a onClick="switchToAdaptiveDesign()">
<span class="icon is-small"><i class="fa fa-tablet"></i></span>
<span>Adaptive design</span>
</a>
</li>
<li id="jquery-tab">
<a onClick="switchToJquery()">
<span class="icon is-small"><i class="fa fa-file-code-o"></i></span>
<span>jQuery</span>
</a>
</li>
<li id="ajax-tab">
<a onClick="switchToAjax()">
<span class="icon is-small"><i class="fa fa-cog"></i></span>
<span>AJAX</span>
</a>
</li>
<li id="angularjs-tab">
<a onClick="switchToAngularJS()">
<span class="icon is-small"><i class="fa fa-file-text-o"></i></span>
<span>AngularJS</span>
</a>
</li>
</ul>
<!--/tabs is-centered-->
</div>
<div class="container">
<div id="all-tab-content">
<h1 class="title is-1" style="text-align:center;">Here will be the contents of the "All" tab</h1>
</div>
<div class="is-hidden" id="adaptivedesign-tab-content">
<h1 class="title is-1" style="text-align:center;">Here will be the contents of the "Adaptive Design" tab</h1>
</div>
<div class="is-hidden" id="jquery-tab-content">
<h1 class="title is-1" style="text-align:center;">Here will be the contents of the "jQuery" tab</h1>
</div>
<div class="is-hidden" id="ajax-tab-content">
<h1 class="title is-1" style="text-align:center;">Here will be the contents of the "AJAX" tab</h1>
</div>
<div class="is-hidden" id="angularjs-tab-content">
<h1 class="title is-1" style="text-align:center;">Here will be the contents of the "AngularJS" tab</h1>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
function switchToAll() {
removeActive();
hideAll();
$("#all-tab").addClass("is-active");
$("#all-tab-content").removeClass("is-hidden");
}
function switchToAdaptiveDesign() {
removeActive();
hideAll();
$("#adaptivedesign-tab").addClass("is-active");
$("#adaptivedesign-tab-content").removeClass("is-hidden");
}
function switchToJquery() {
removeActive();
hideAll();
$("#jquery-tab").addClass("is-active");
$("#jquery-tab-content").removeClass("is-hidden");
}
function switchToAjax() {
removeActive();
hideAll();
$("#ajax-tab").addClass("is-active");
$("#ajax-tab-content").removeClass("is-hidden");
}
function switchToAngularJS() {
removeActive();
hideAll();
$("#angularjs-tab").addClass("is-active");
$("#angularjs-tab-content").removeClass("is-hidden");
}
function removeActive() {
$("li").each(function() {
$(this).removeClass("is-active");
});
}
function hideAll(){
$("#all-tab-content").addClass("is-hidden");
$("#adaptivedesign-tab-content").addClass("is-hidden");
$("#jquery-tab-content").addClass("is-hidden");
$("#ajax-tab-content").addClass("is-hidden");
$("#angularjs-tab-content").addClass("is-hidden");
}
</script>
</body>
</html>You can do it a bit shorter in Bulma with javascript without having to create 7 functions or importing jQuery, using just 2 classes and 1 function, see below,
CSS
.tabcontent {
display: none;
animation: fadeEffect 1s; /* Fading effect takes 1 second */
}
/* Go from zero to full opacity */
@keyframes fadeEffect {
from {opacity: 0;}
to {opacity: 1;}
}
HTML
<div class="tabs is-centered">
<ul>
<li id="tablinks">
<a onclick="openTab(event, 'Overview')">
<span class="icon is-large"><i class="fa fa-2x fa-html5 blue"></i></span>
<span>Overview</span>
</a>
</li>
<li id="tablinks">
<a onclick="openTab(event, 'Details')">
<span class="icon is-large"><i class="fa fa-2x fa-tablet blue"></i></span>
<span>Details</span>
</a>
</li>
<li id="tablinks">
<a onclick="openTab(event, 'Specification')">
<span class="icon is-large"><i class="fa fa-2x fa-file-code-o blue"></i></span>
<span>Specification</span>
</a>
</li>
<li id="tablinks">
<a onclick="openTab(event, 'Reviews')">
<span class="icon is-large"><i class="fa fa-2x fa-cog blue"></i></span>
<span>Reviews</span>
</a>
</li>
</ul>
<!--/tabs is-centered-->
</div>
JAVASCRIPT
function openTab(evt, tabTitle) {
var i, tabcontent, tablinks;
tabcontent = document.getElementsByClassName("tabcontent");
for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = "none";
}
tablinks = document.getElementsByClassName("tablinks");
for (i = 0; i < tablinks.length; i++) {
tablinks[i].className = tablinks[i].className.replace(" active", "");
}
document.getElementById(tabTitle).style.display = "block";
evt.currentTarget.className += " active";
}
You can add an active class and adjust it to suit although this example doesn't actually have an active class!. Uses Font Awesome.
Sample code on GitHub at minimallinux
Bulma CSS does not have the best collection for Javascript implementation, as its motivation is to be a CSS only framework.
If you are not much familiar with Javascript, jQuery, AJAX, I would suggest you adopt other frameworks like Bootstrap or Materialize CSS.
A simple example to achieve the functionality you are looking for:-
https://jqueryui.com/tabs/#ajax
A slightly simplified take on Sebastian Delgado's solution using vanilla JS:
document.addEventListener('DOMContentLoaded', () => {
const tabs = document.querySelectorAll('.tab')
if (tabs === undefined) return
tabs.forEach((tab) => {
tab.addEventListener('click', (e) => {
// event.currentTarget refers to element on which
// the event listener was attached
const tabName = e.currentTarget.attributes[1].nodeValue
const currentTab = document.querySelector('.tab.is-active')
const currentContent = document.getElementById(`${currentTab.id}-content`)
const newTab = document.getElementById(tabName)
const newTabContent = document.getElementById(`${tabName}-content`)
currentTab.classList.remove('is-active')
currentContent.classList.add('is-hidden')
newTab.classList.add('is-active')
newTabContent.classList.remove('is-hidden')
})
})
})
A better solution would be to create a single method that can handle all of your tabs, not one method for each, you would need to use ids in order to differentiate them, the following way:
HTML
<div class="columns">
<div class="column">
<div class="tabs is-centered">
<ul>
<li id='insights-tab' class="tab is-active">
<a>
<span class="icon is-small"><i class="far fa-chart-bar"></i></span>
<span>Insights</span>
</a>
</li>
<li id='registerAgent-tab' class="tab">
<a>
<span class="icon is-small"><i class="fas fa-user-plus"></i></span>
<span>Register Agent</span>
</a>
</li>
<li id='options-tab' class="tab">
<a>
<span class="icon is-small"><i class="fas fa-cogs"></i></span>
<span>Options</span>
</a>
</li>
</ul>
</div>
</div>
</div>
<div class="columns">
<div class="column">
<div id="insights-tab-content">
<p>Insights</p>
</div>
<div class="hidden" id="registerAgent-tab-content">
<p>Register Agent</p>
</div>
<div class="hidden" id="options-tab-content">
<p>Options</p>
</div>
</div>
</div>
</div>
JAVASCRIPT
var ready = () => {
$('.tab').on('click', (e) => {
var tabName = (e.currentTarget.attributes[0].nodeValue);
removeActive();
hideAll();
console.log(tabName)
$('#' + tabName).addClass('is-active');
$('#' + tabName + '-content').removeClass('hidden');
});
var removeActive = () => {
$('li').each(function() {
$(this).removeClass('is-active');
});
}
var hideAll = () => {
$('#registerAgent-tab-content').addClass('hidden');
$('#insights-tab-content').addClass('hidden');
$('#options-tab-content').addClass('hidden');
}
}
$(document).ready(ready);
$(document).on("page:load", ready);
CSS
.hidden{ display: none; }