Category: Development

JavaScript:

const accordionSections = document.querySelectorAll(".accordion");
accordionSections.forEach((accordion) => {
	accordion.onclick = function () {
		this.classList.toggle("is-open");

		let content = this.getElementsByClassName("accordion-content")[0];;
		//console.log(content);
		if (content.style.maxHeight) {
		  //this is if the accordion is open
		  content.style.maxHeight = null;
		} else {
			//if the accordion is currently closed
			content.style.maxHeight = content.scrollHeight + "px";
			//console.log(content.style.maxHeight);
		}
	};
});

HTML

<link rel='stylesheet'  href='https://fonts.googleapis.com/icon?family=Material+Icons' media='all' />
<div class="accordion">
	<div class="summary">Title 1</div>							
	<div class="accordion-content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque sed eros ac leo ultricies interdum sit amet et nunc.</div>											</div>
<div class="accordion">
	<div class="summary">Title 2</div>							
	<div class="accordion-content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque sed eros ac leo ultricies interdum sit amet et nunc.</div>											</div>
<div class="accordion">
	<div class="summary">Title 3</div>							
	<div class="accordion-content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque sed eros ac leo ultricies interdum sit amet et nunc.</div>											</div>

CSS:

.accordion {
    cursor: pointer;
    position: relative;
}
.accordion:before {
    font-family: "Material Icons";
    content: "\e5e1";
    display: inline-block;
    position: absolute;
    top: 22px;
}
.accordion .summary {
    padding-left: 24px;
}
.accordion.is-open:before {
    transform: rotate(90deg);
}
.accordion:hover,
.accordion.is-open {
}
.accordion-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.2s ease-in-out;
}

Using IntersectionObserver API

The IntersectionObserver API provides a way to asynchronously observe changes in the intersection of a target element with an ancestor element or with a top-level document’s viewport.

Here’s an example that triggers a function when an Element is in viewport:

const inViewport = (entries, observer) => {
	entries.forEach(entry => {
		if(entry.isIntersecting && entry.target.id=="php"){
			php.setValueAnimated(9, 3);
		}
	});
};

const Obs = new IntersectionObserver(inViewport);
const obsOptions = {}; //See: https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API#Intersection_observer_options

// Attach observer to every [data-inviewport] element:
const ELs_inViewport = document.querySelectorAll('.gauge-container');
ELs_inViewport.forEach(EL => {
	Obs.observe(EL, obsOptions);
});

Here’s an example that triggers a classList toggle when an Element is in viewport:

const inViewport = (entries, observer) => {
  entries.forEach(entry => {
    entry.target.classList.toggle("is-inViewport", entry.isIntersecting);
  });
};

const Obs = new IntersectionObserver(inViewport);
const obsOptions = {}; //See: https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API#Intersection_observer_options

// Attach observer to every [data-inviewport] element:
const ELs_inViewport = document.querySelectorAll('[data-inviewport]');
ELs_inViewport.forEach(EL => {
  Obs.observe(EL, obsOptions);
});

[data-inviewport] { /* THIS DEMO ONLY */
  width:100px; height:100px; background:#0bf; margin: 150vh 0; 
}

/* inViewport */

[data-inviewport="scale-in"] { 
  transition: 2s;
  transform: scale(0.1);
}
[data-inviewport="scale-in"].is-inViewport { 
  transform: scale(1);
}

[data-inviewport="fade-rotate"] { 
  transition: 2s;
  opacity: 0;
}
[data-inviewport="fade-rotate"].is-inViewport { 
  transform: rotate(180deg);
  opacity: 1;
}

Scroll down...
<div data-inviewport="scale-in"></div>
<div data-inviewport="fade-rotate"></div>