Created
November 15, 2017 15:25
-
-
Save jbutz/47355837c0874f1fa284e525eb3ee188 to your computer and use it in GitHub Desktop.
Bootstrap Basic Navbar Collapse, no jQuery or Bootstrap JS
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
let collapseElements = document.querySelectorAll('[data-toggle="collapse"]'); | |
const CLASS_SHOW = 'show'; | |
const CLASS_COLLAPSE = 'collapse'; | |
const CLASS_COLLAPSING = 'collapsing'; | |
const CLASS_COLLAPSED = 'collapsed'; | |
const ANIMATION_TIME = 350; // 0.35s | |
function handleCollapseElementClick(e) { | |
let el = e.currentTarget; | |
let collapseTargetId = el.dataset.target || el.href || null; | |
if (collapseTargetId) { | |
let targetEl = document.querySelector(collapseTargetId); | |
let isShown = targetEl.classList.contains(CLASS_SHOW) || targetEl.classList.contains(CLASS_COLLAPSING); | |
if(!isShown) { | |
targetEl.classList.remove(CLASS_COLLAPSE); | |
targetEl.classList.add(CLASS_COLLAPSING); | |
targetEl.style.height = 0; | |
targetEl.classList.remove(CLASS_COLLAPSED); | |
setTimeout(() => { | |
targetEl.classList.remove(CLASS_COLLAPSING); | |
targetEl.classList.add(CLASS_COLLAPSE, CLASS_SHOW); | |
targetEl.style.height = ''; | |
}, ANIMATION_TIME); | |
targetEl.style.height = `${targetEl.scrollHeight}px`; | |
} else { | |
targetEl.style.height = `${targetEl.getBoundingClientRect().height}px`; | |
targetEl.offsetHeight; // force reflow | |
targetEl.classList.add(CLASS_COLLAPSING); | |
targetEl.classList.remove(CLASS_COLLAPSE, CLASS_SHOW); | |
targetEl.style.height = ''; | |
setTimeout(() => { | |
targetEl.classList.remove(CLASS_COLLAPSING); | |
targetEl.classList.add(CLASS_COLLAPSE); | |
}, ANIMATION_TIME); | |
} | |
} | |
} | |
collapseElements.forEach((el) => { | |
el.addEventListener('click', handleCollapseElementClick); | |
}); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Thanks for this - it's really helpful!
Fwiw, to make it work in IE 11 I just had to replace this:
with this: