cdransf/coryd.dev-eleventy
Archived
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

chore: revert to js toggle; better support for all cases

Browse source
This commit is contained in:
Cory Dransfeldt 2024-06-17 14:51:24 -07:00
parent 0e79fbeb01
commit 16b6e2163b
No known key found for this signature in database
8 changed files with 64 additions and 79 deletions
Download patch file Download diff file Expand all files Collapse all files

24
src/assets/scripts/text-toggle.js Normal file
View file

@ -0,0 +1,24 @@
window.onload = () => {
const button = document.querySelector('[data-toggle-button]')
const content = document.querySelector('[data-toggle-content]')
const text = document.querySelectorAll('[data-toggle-content] p')
const minHeight = 500 // this needs to match the height set on [data-toggle-content].text-toggle-hidden in text-toggle.css
let interiorHeight = 0
text.forEach(node => interiorHeight += node.scrollHeight)
if (interiorHeight < minHeight) {
content.classList.remove('text-toggle-hidden')
button.style.display = 'none'
}
button.addEventListener('click', () => {
if (content.classList.contains('text-toggle-hidden')) {
content.classList.remove('text-toggle-hidden')
button.textContent = 'Show less'
} else {
content.classList.add('text-toggle-hidden')
button.textContent = 'Show more'
}
});
}