feat: add tabs implementation

chore: use filename by default in sidebar
This commit is contained in:
Xin
2023-08-02 21:24:52 +01:00
parent e71887d00e
commit b6e0ab0872
6 changed files with 126 additions and 11 deletions

20
assets/js/tabs.js Normal file
View File

@ -0,0 +1,20 @@
document.querySelectorAll('.tabs-toggle').forEach(function (button) {
button.addEventListener('click', function (e) {
// set parent tabs to unselected
const tabs = Array.from(e.target.parentElement.querySelectorAll('.tabs-toggle'));
tabs.map(tab => tab.setAttribute('data-state', ''));
// set current tab to selected
e.target.setAttribute('data-state', 'selected');
// set all panels to unselected
const panelsContainer = e.target.parentElement.nextElementSibling;
Array.from(panelsContainer.children).forEach(function (panel) {
panel.setAttribute('data-state', '');
});
const panelId = e.target.getAttribute('aria-controls');
const panel = panelsContainer.querySelector(`#${panelId}`);
panel.setAttribute('data-state', 'selected');
});
});