Fix all tab content being changed at once
parent
b6ca84c7a5
commit
ae2004090c
@ -1,7 +0,0 @@
|
||||
#tab-content div {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#tab-content div.is-active {
|
||||
display: block;
|
||||
}
|
@ -1,35 +1,36 @@
|
||||
// tabbed browsing for the modal
|
||||
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);
|
||||
}
|
||||
});
|
||||
}
|
||||
var TABS = [...document.querySelectorAll('#tabs li')];
|
||||
var CONTENT = [...document.querySelectorAll('#tab-content div')];
|
||||
var ACTIVE_CLASS = 'is-active';
|
||||
initTabs();
|
||||
function initTabs(unique) {
|
||||
var tabs_selector = '#tabs-'+unique+' li';
|
||||
var TABS = [...document.querySelectorAll(tabs_selector)];
|
||||
var CONTENT = [...document.querySelectorAll('#tab-content-'+unique+' div')];
|
||||
var ACTIVE_CLASS = 'is-active';
|
||||
TABS.forEach((tab) => {
|
||||
tab.addEventListener('click', (e) => {
|
||||
let selected = tab.getAttribute('data-tab');
|
||||
updateActiveTab(TABS, ACTIVE_CLASS, tab);
|
||||
updateActiveContent(CONTENT, ACTIVE_CLASS, selected);
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
function updateActiveTab(TABS, ACTIVE_CLASS, selected) {
|
||||
TABS.forEach((tab) => {
|
||||
if (tab && tab.classList.contains(ACTIVE_CLASS)) {
|
||||
tab.classList.remove(ACTIVE_CLASS);
|
||||
}
|
||||
});
|
||||
selected.classList.add(ACTIVE_CLASS);
|
||||
}
|
||||
|
||||
function updateActiveContent(CONTENT, ACTIVE_CLASS, 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();
|
@ -1,8 +1,8 @@
|
||||
<magnet-block attract-distance="10" align-to="outer|center" class="floating-window">
|
||||
{% extends 'partials/panel.html' %}
|
||||
{% block heading %}
|
||||
{% endblock %}
|
||||
{% block heading %}
|
||||
{% endblock %}
|
||||
|
||||
{% block panel_content %}
|
||||
{% endblock %}
|
||||
{% block panel_content %}
|
||||
{% endblock %}
|
||||
</magnet-block>
|
Loading…
Reference in New Issue