Description

// “See More” Sections & Buttons
function initSeeMoreSections () {
document
.querySelectorAll(‘.product-box-body-see-more’)
.forEach((el, i) => {
el.id = el.id ? el.id : `section-${i}-see-more`
addSeeMoreToSection(el.id)
})
}
function expandSection(id=’desc-see-more’) {
document.querySelector(`#${id}`).classList.add(‘product-box-body-see-more-active’)
document.querySelector(`#${id}-btn`).classList.add(‘product-box-see-more-button-clicked’)
}
function addSeeMoreToSection(id=’desc-see-more’) {
var section = document.querySelector(`#${id}`)
var sectionHeight = section.clientHeight
insertHTMLAfterId(id, SeeMoreButton(id))
if (sectionHeight < 360) {
document.querySelector(`#${id}-btn`).classList.add('product-box-see-more-button-clicked')
}
}
function SeeMoreButton (id='desc-see-more') {
return `
See More
`
}
// FAQ Collapse/Expand
function initFAQs () {
document
.querySelectorAll(‘.product-box-body .question’)
.forEach((el, i) => el.innerHTML += CollapseButton(i))
document
.querySelectorAll(‘.product-box-body .question’)
.forEach((el, i) => el.onclick = () => toggleFAQ(i))
}
function CollapseButton (i) {
return `
❯
`
}
function toggleFAQ (index) {
var answer = document.querySelectorAll(‘.product-box-body .answer’)[index]
var button = document.querySelectorAll(‘.product-box-body .toggle-faq’)[index]
if (answer.classList.contains(‘answer-expanded’)) {
answer.classList.remove(‘answer-expanded’)
button.innerHTML = ‘❯’
} else {
answer.classList.add(‘answer-expanded’)
button.innerHTML = ‘−’
}
}
// Mobile Section Nav collapse/expand
function initMobileNav () {
const toggle = document.getElementById(‘section-nav-toggle’)
const menu = document.getElementById(‘section-nav-menu’)
const isHidden = () => menu.classList.contains(‘hide’)
const hideMenu = () => menu.classList.add(‘hide’)
const showMenu = () => menu.classList.remove(‘hide’)
toggle.onclick = () => isHidden() ? showMenu() : hideMenu()
const sectionLinks = document.querySelectorAll(‘.product-section-navigation-menu .product-section-link-mobile’)
sectionLinks.forEach(link => {
link.onclick = () => {
hideMenu()
document.location = link.getAttribute(‘href’)
}
})
}
function initReviewsNavLink () {
const menu = document.getElementById(‘section-nav-menu’)
const reviewsNavLink = document.getElementById(‘reviews-nav-link’)
const reviews = $(‘#judgeme_product_reviews .jdgm-rev’)
if (reviews.length > 0) {
reviewsNavLink.classList.remove(‘hide’)
}
}
// Init Widgets
setTimeout(() => {
initFAQs()
initSeeMoreSections()
initMobileNav()
initReviewsNavLink()
}, 2000)
// Utils
function insertHTMLAfterId (id, html) {
var element = document.getElementById(id)
var parent = element.parentElement
parent.innerHTML = `${parent.innerHTML}n${html}`
}