Javascript changes
This commit is contained in:
parent
2ad31d052e
commit
5f4f9e1c30
1 changed files with 18 additions and 2 deletions
20
index.html
20
index.html
|
@ -94,23 +94,39 @@
|
||||||
<html>
|
<html>
|
||||||
<script>
|
<script>
|
||||||
function toggleSections(button){
|
function toggleSections(button){
|
||||||
|
// Constants
|
||||||
hiddenClass = "hidden";
|
hiddenClass = "hidden";
|
||||||
revealedClass = "visible";
|
revealedClass = "visible";
|
||||||
|
ids = ["about", "projects", "contact"];
|
||||||
|
selectedClasses = ["border-[#14591e]" , "border-b-2"]
|
||||||
|
// Helper functions
|
||||||
function switchClasses(element, toRemove, toInsert){
|
function switchClasses(element, toRemove, toInsert){
|
||||||
element.classList.remove(toRemove);
|
element.classList.remove(toRemove);
|
||||||
element.classList.add(toInsert);
|
element.classList.add(toInsert);
|
||||||
}
|
}
|
||||||
|
function removeClasses(element, classes){
|
||||||
|
element.classList.forEach()
|
||||||
|
}
|
||||||
function hide(id) {
|
function hide(id) {
|
||||||
switchClasses(document.getElementById(id), revealedClass, hiddenClass);
|
switchClasses(document.getElementById(id), revealedClass, hiddenClass);
|
||||||
}
|
}
|
||||||
function show(id) {
|
function show(id) {
|
||||||
switchClasses(document.getElementById(id), hiddenClass, revealedClass);
|
switchClasses(document.getElementById(id), hiddenClass, revealedClass);
|
||||||
}
|
}
|
||||||
|
function hasClasses(element, classes){
|
||||||
|
return classes.map(c => element.classList.contains(c)).reduce((acc, b) => acc && b, true);
|
||||||
|
}
|
||||||
|
// Handle underline for tab buttons
|
||||||
|
parent = button.parentElement;
|
||||||
|
// Remove selection classes from other buttons
|
||||||
|
// If button clicked already selected, unselect
|
||||||
|
// Otherwise select
|
||||||
|
|
||||||
|
// Manage hiding/showing content
|
||||||
id = button.textContent;
|
id = button.textContent;
|
||||||
ids = ["about", "projects", "contact"];
|
|
||||||
ids.filter(i => i !== id).forEach(hide);
|
ids.filter(i => i !== id).forEach(hide);
|
||||||
element = document.getElementById(id);
|
element = document.getElementById(id);
|
||||||
if(element.classList.contains(revealedClass)){
|
if(hasClasses(element, [revealedClass])){
|
||||||
switchClasses(element, revealedClass, hiddenClass);
|
switchClasses(element, revealedClass, hiddenClass);
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in a new issue