/** FUNCTIONS TO CONTROL SLIDE DOWN DIVS.
getMyHeight...
- onload: gets heights of all elements/divs with the target class 'get_height' before hiding it;
- Targeted element height is attached to window object as window[theId].targetHeight;
- Hiding is done by removing 'initial_state'...the css class that declares the element's initial state and then adding 'hide_it'...the css class that hides the element;
- Using classes instead of direct js allows for css transitions;
*/
function getMyHeight(target) {
let elements = document.getElementsByClassName(target);
Array.from(elements).forEach((e) => {
const theId = e.id;
window[theId].targetHeight = e.offsetHeight;
e.classList.remove('initial_state');
e.classList.add('hide_it');
});
}
/** slideDivs...
- Attached via onclick to a triggering element which sends id of target element.
- Manipulates css classes to remove hiding class and add show class;
- Uses height from getMyHeight onload function stored as window[theId].targetHeight;
*/
function slideDivs(target) {
const element = document.getElementById(target);
const theId = element.id;
if (element.classList.contains('hide_it')) {
element.classList.remove('hide_it');
element.classList.add('show_it');
element.style.height = (window[theId].targetHeight) + 'px';
}else{
element.classList.remove('show_it');
element.classList.add('hide_it');
element.style.height = '0px';
}
}
function showDivs(target) {
const element = document.getElementById(target);
const theId = element.id;
element.classList.remove('hide_it');
element.classList.add('show_it');
element.style.height = (window[theId].targetHeight) + 'px';
}
function hideDivs(target) {
const element = document.getElementById(target);
element.classList.remove('show_it');
element.classList.add('hide_it');
element.style.height = '0px';
}
/** showMenuCategory()
- Specifically used by select category dropdown to close all the sorted menu item divs
- Onclick attached to the sort_order question mark/help link sends proper menu category #div id
to the slideDivs() function
function showMenuCategory(target) {
//hide all the sort divs before choosing the one to show
let allDivs = document.getElementsByClassName('sorted_menu_items_all');
Array.from(allDivs).forEach((ad) => {
const theId = ad.id;
ad.classList.add('hide_it');
ad.style.height = '0px';
});
}
*/
