You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
35 lines
1.1 KiB
JavaScript
35 lines
1.1 KiB
JavaScript
/* To toggle the different hero stylings in demo */
|
|
const small = document.getElementById("small-hero");
|
|
const med = document.getElementById("med-hero");
|
|
const full = document.getElementById("full-hero");
|
|
|
|
const hero = document.getElementById("hero");
|
|
const main = document.getElementById("main");
|
|
const credit = document.getElementById("hero__credit");
|
|
|
|
small.addEventListener('click', function(){burgerToggle('s')}, false);
|
|
med.addEventListener('click', function(){burgerToggle('m')}, false);
|
|
full.addEventListener('click', function(){burgerToggle('f')}, false);
|
|
|
|
function burgerToggle(size) {
|
|
/* Remove all then re-add what's needed */
|
|
hero.classList.remove('hero-s');
|
|
hero.classList.remove('hero-m');
|
|
hero.classList.remove('hero-f');
|
|
hero.classList.remove('hero--para');
|
|
main.classList.remove('main--para');
|
|
credit.classList.remove('hero__credit--hidden');
|
|
|
|
if (size == 'm'){
|
|
hero.classList.add('hero-m');
|
|
}else if (size == 'f'){
|
|
hero.classList.add('hero-f');
|
|
hero.classList.add('hero--para');
|
|
main.classList.add('main--para');
|
|
}else{
|
|
hero.classList.add('hero-s');
|
|
credit.classList.add('hero__credit--hidden');
|
|
}
|
|
}
|
|
|