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></div>
If 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></div>
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:-
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
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; }
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')
})
})
})