We Keep Coding

How do I add css transition in React + tailwind (in my Accordian example)?

import { useState } from "react";
const Section = ({ title, description, isVisible, setIsVisible }) => {
return (
<div class="section p-2 m-2 border border-black rounded-lg">
<h2 className="font-bold text-2xl mr-3 inline">{title}</h2>
<button
className="font-bold"
onClick={() => (isVisible ? setIsVisible(false) : setIsVisible(true))}
>
{!isVisible ? "show" : "hide"}
</button>
{isVisible && <p>{description}</p>}
</div>
);
};
const Accordian = () => {
const [visibleSection, setVisibleSection] = useState("none");
return (
<>
<h2 className="font-bold text-xl inline m-auto">Example of collapsable accordian</h2>
<Section
isVisible={visibleSection==="item1"}
setIsVisible={(toShow) => toShow ? setVisibleSection("item1") : setVisibleSection("none")}
title={"Title 1"}
description={
"Lorem ipsum dolor, sit amet consectetur adipisicing elit. Labore iure laudantium officia laboriosam consectetur voluptate ipsum ea molestiae error magnam quos, in illum, repellat, nulla qui! Dignissimos nemo placeat cupiditate. Temporibus aperiam odit sunt! Culpa vel, suscipit a laborum iusto necessitatibus, quae dicta ducimus corporis, expedita nam earum dolorem enim."
}
></Section>
<Section
isVisible={visibleSection==="item2"}
setIsVisible={(toShow) => toShow ? setVisibleSection("item2") : setVisibleSection("none")}
title={"Title 2"}
description={
"Lorem ipsum dolor, sit amet consectetur adipisicing elit. Labore iure laudantium officia laboriosam consectetur voluptate ipsum ea molestiae error magnam quos, in illum, repellat, nulla qui! Dignissimos nemo placeat cupiditate. Temporibus aperiam odit sunt! Culpa vel, suscipit a laborum iusto necessitatibus, quae dicta ducimus corporis, expedita nam earum dolorem enim."
}
></Section>
<Section
isVisible={visibleSection==="item3"}
setIsVisible={(toShow) => toShow ? setVisibleSection("item3") : setVisibleSection("none")}
title={"Title 3"}
description={
"Lorem, ipsum dolor sit amet consectetur adipisicing elit. Labore, quos? Commodi unde deserunt voluptates suscipit odit similique voluptas at totam distinctio officia eum est a repellendus optio officiis error, excepturi consequatur cum illum aspernatur nemo eaque et perferendis molestiae? Explicabo aspernatur in praesentium at ad est voluptates tenetur. Distinctio, aliquam numquam tempore cum, iusto est ex quidem expedita eum odio fugiat architecto sit culpa qui tempora beatae quae mollitia, odit sunt! Iure, officiis. Vitae facilis nisi accusantium nihil iste, unde laudantium. Quasi sapiente reprehenderit aperiam recusandae minus fugit. Itaque nisi recusandae illum sed, adipisci unde asperiores dolore tempore cupiditate aperiam?"
}
></Section>
</>
);
};
export default Accordian;
I want to add transition when user clicks on hide and/or show button. But here there is no property like height on the div which accomodates h1 & p. I actually works based on the state (isVisible) which shows or hide the p element. So, is there any way to use transition with react state ?
And also is there any state in css like onClick on that div (just like hover and focus) so that I can implement the transition ?

Scroll element into view - top nav

I've this code in the snippet. It's an intersection Observer that tracks visible headers and adds an "active" class to the corresponding anchor tag in the top nav.
I would like to know if it's possible for the 'li' element with class "active" to also be scrolled into view.
I have tried a mutationObserver but I can't seem to make it work by any means.
Thanks!
window.addEventListener('DOMContentLoaded', () => {
const observer = new IntersectionObserver(entries => {
entries.forEach(entry => {
const id = entry.target.getAttribute('id');
if (entry.intersectionRatio > 0) {
document.querySelector(`ul li a[href="#${id}"]`).parentElement.classList.add('active');
} else {
document.querySelector(`ul li a[href="#${id}"]`).parentElement.classList.remove('active');
}
});
});
// Track all sections that have an `id` applied
document.querySelectorAll('h2[id]').forEach((h2) => {
observer.observe(h2);
});
});
.table_of_content li{
display:inline-flex;
margin-right: 20px;
border-right: 2px solid black;
padding-right:15px;
}
.table_of_content {
border-left:none;
z-index:1000;
position: sticky;
background-color:white;
top: -1px;
overflow-x: auto;
overflow-y: hidden;
white-space: nowrap;
}
.table_of_content ul {
margin: 0 auto;
padding: 15px 0;
}
.table_of_content li.active > a {
color:#ff9900;
border-radius:5px;
text-decoration:underline;
}
.section {
max-width: 400px;
}
<div class="section">
<div id="navigation12" class="table_of_content">
<ul>
<li><span>In this article</span></li>
<li>Heading 1</li>
<li>Heading 2</li>
<li>Heading 3</li>
<li>Heading 4</li>
<li>Heading 5</li>
<li>Heading 6</li>
<li>Heading 7</li>
<li>Heading 8</li>
</ul>
</div>
<h2 id="header1">Header 1</h2>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Culpa, ex. Eaque laboriosam fugiat debitis quisquam maiores ipsa aspernatur quam provident tenetur! Ipsa possimus illum provident. Quam, quaerat cum? Earum, reiciendis!
<h2 id="header2">Header 2</h2>
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quia neque, repudiandae minus sit ratione expedita debitis hic sequi recusandae repellat? Eligendi, reiciendis voluptatem. Quidem tempore cupiditate obcaecati rem omnis quis commodi, rerum in delectus beatae eius nulla? Harum laborum, obcaecati ipsa officiis velit voluptatibus alias facilis at recusandae dolores molestias, autem quas. Repellendus ducimus soluta culpa dicta vel eveniet recusandae beatae odit id exercitationem ratione, nemo inventore, unde dolores eligendi quasi pariatur rem labore? Labore eum doloremque non illo, autem optio, excepturi ad quis reiciendis exercitationem necessitatibus fugit? Repellendus dolore ea magnam tempora in corporis sed totam et suscipit! Nihil?
<h2 id="header3">Header 3</h2>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Architecto debitis, eligendi odit quam necessitatibus enim alias perferendis ut maxime quod quae ipsam minima voluptates voluptatibus at nobis, esse sequi beatae dolor quis. Quia officiis consequuntur, delectus dolore temporibus reprehenderit reiciendis sunt perspiciatis aspernatur, facere veniam. Ad corporis a voluptate provident soluta eveniet? Sunt est deserunt amet assumenda iste odit ad placeat! Vitae aliquam aliquid, molestiae cum aut unde velit laboriosam, perferendis rem asperiores pariatur quam optio quo nostrum saepe quia id dignissimos, consequatur molestias sed nulla ipsum? Molestias ab sapiente dolores ut. Dolor vero quod, distinctio laborum expedita incidunt repudiandae.
<h2 id="header4">Header 4</h2>
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Illo consequatur, harum doloribus nisi vitae odit non deserunt et veritatis modi maxime repudiandae quasi cum eveniet inventore, fuga similique accusamus ad magnam alias qui optio delectus provident. Asperiores labore molestias quod laborum quasi sequi suscipit, optio tenetur esse soluta debitis eaque, doloribus reiciendis voluptatum iure dolorum quibusdam vel nihil quo ratione cupiditate necessitatibus aliquid obcaecati totam. Deserunt laudantium officiis et? Quas doloribus ipsum nam similique libero velit, tempora, delectus exercitationem cumque autem in iste, perspiciatis repudiandae a aliquid nobis ut voluptate corrupti unde recusandae voluptas rem aut nisi quam. Inventore, dolor.
<h2 id="header5">Header 5</h2>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Animi explicabo, numquam aliquam minus eveniet vero neque ratione quidem voluptatem ipsa officiis soluta beatae dicta eligendi quo, nemo quaerat atque mollitia! Vitae mollitia voluptatum natus iusto eum quis debitis, similique illo, libero necessitatibus illum provident ad inventore sed consectetur molestias ipsa impedit obcaecati cumque et. Eveniet, molestiae deserunt rem earum dolor neque animi dignissimos dolore atque provident at numquam repellendus aliquam adipisci officia maxime fuga unde reiciendis saepe, sint culpa recusandae. At neque sapiente mollitia doloremque, architecto voluptatem delectus nulla laboriosam dicta quo animi magnam nisi in? Voluptatum harum et est!
<h2 id="header6">Header 6</h2>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Debitis distinctio nesciunt ut similique dicta cum est quis soluta harum quam, dolorem sequi repellat, atque provident eius. Atque ea quibusdam quo! Rem nihil pariatur ex magni odio modi sed unde quidem laboriosam doloremque repellat quo eum nemo eaque mollitia adipisci exercitationem ipsam blanditiis, consectetur atque libero totam quaerat officia soluta? Cum ipsam a incidunt cumque earum quod ea quibusdam vel ratione? Minima, id voluptate! Minima cumque quisquam, quod blanditiis quas et est laudantium placeat explicabo, dolorum velit, facilis cupiditate aspernatur nostrum dicta voluptatem adipisci suscipit debitis enim ullam commodi? Magni, consequatur.
<h2 id="header7">Header 7</h2>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Blanditiis alias soluta qui accusantium in repellendus, doloremque ullam quis esse optio veniam fugit doloribus mollitia ea, dolorum rem. Unde, adipisci. Totam vel harum maiores illo nobis culpa labore corrupti quasi atque consequuntur, minus odio deleniti iure, ab natus aliquam consectetur asperiores quia eveniet dolorem similique dolore eos quisquam. Quis, ipsam corrupti? Atque molestiae omnis asperiores dolores eos obcaecati aspernatur, recusandae eaque numquam consectetur aut corporis vitae dignissimos et ipsum eum odit id incidunt voluptate perferendis! Saepe tempora iste aspernatur enim quidem labore voluptatem id dolor quam esse! Quibusdam reiciendis inventore hic!
<h2 id="header8">Header 8</h2>
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Est amet inventore quae eveniet sequi unde! Consequatur necessitatibus minima molestias quia vero recusandae unde veniam nobis qui saepe minus culpa ab rem aspernatur officiis earum et doloribus, provident eius asperiores. Harum consectetur odio blanditiis, sunt rerum necessitatibus exercitationem vero dolorem rem, cupiditate pariatur officiis repudiandae deserunt modi sequi aspernatur ratione libero perspiciatis illo cum saepe debitis tempora sapiente! Possimus modi nostrum ipsum placeat nam praesentium quos vero in, non dolor debitis dolorum nobis cum natus obcaecati, soluta reprehenderit sapiente. Eius ducimus placeat numquam incidunt magni repudiandae accusantium quasi alias vitae vero!
</div>

All you have to do is make add a line to your script.
When you add class "active" to active li element, make the a tag scroll into the view, like so
window.addEventListener("DOMContentLoaded", () => {
const observer = new IntersectionObserver((entries) => {
entries.forEach((entry) => {
const id = entry.target.getAttribute("id");
if (entry.intersectionRatio > 0) {
document
.querySelector(`ul li a[href="#${id}"]`)
.parentElement.classList.add("active");
// The following line scrolls the active "li" element into view
document.querySelector(`ul li a[href="#${id}"]`).scrollIntoView();
} else {
document
.querySelector(`ul li a[href="#${id}"]`)
.parentElement.classList.remove("active");
}
});
});
// Track all sections that have an `id` applied
document.querySelectorAll("h2[id]").forEach((h2) => {
observer.observe(h2);
});
});
Hope it helps.

I modified your code just a bit to get this working. The important part is where you add the active class to your current active element: currentActiveElement.scrollIntoView()
This ensures, that the current element with the active class is always scrolled into the view.
window.addEventListener('DOMContentLoaded', () => {
const observer = new IntersectionObserver(entries => {
entries.forEach(entry => {
const id = entry.target.getAttribute('id');
if (entry.intersectionRatio > 0) {
let currentActiveElement = document.querySelector(`ul li a[href="#${id}"]`);
currentActiveElement.parentElement.classList.add('active');
currentActiveElement.scrollIntoView();
} else {
document.querySelector(`ul li a[href="#${id}"]`).parentElement.classList.remove('active');
}
});
});
// Track all sections that have an `id` applied
document.querySelectorAll('h2[id]').forEach((h2) => {
observer.observe(h2);
});
});
.table_of_content li{
display:inline-flex;
margin-right: 20px;
border-right: 2px solid black;
padding-right:15px;
}
.table_of_content {
border-left:none;
z-index:1000;
position: sticky;
background-color:white;
top: -1px;
overflow-x: auto;
overflow-y: hidden;
white-space: nowrap;
}
.table_of_content ul {
margin: 0 auto;
padding: 15px 0;
}
.table_of_content li.active > a {
color:#ff9900;
border-radius:5px;
text-decoration:underline;
}
.section {
max-width: 400px;
}
<div class="section">
<div id="navigation12" class="table_of_content">
<ul>
<li><span>In this article</span></li>
<li>Heading 1</li>
<li>Heading 2</li>
<li>Heading 3</li>
<li>Heading 4</li>
<li>Heading 5</li>
<li>Heading 6</li>
<li>Heading 7</li>
<li>Heading 8</li>
</ul>
</div>
<h2 id="header1">Header 1</h2>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Culpa, ex. Eaque laboriosam fugiat debitis quisquam maiores ipsa aspernatur quam provident tenetur! Ipsa possimus illum provident. Quam, quaerat cum? Earum, reiciendis!
<h2 id="header2">Header 2</h2>
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quia neque, repudiandae minus sit ratione expedita debitis hic sequi recusandae repellat? Eligendi, reiciendis voluptatem. Quidem tempore cupiditate obcaecati rem omnis quis commodi, rerum in delectus beatae eius nulla? Harum laborum, obcaecati ipsa officiis velit voluptatibus alias facilis at recusandae dolores molestias, autem quas. Repellendus ducimus soluta culpa dicta vel eveniet recusandae beatae odit id exercitationem ratione, nemo inventore, unde dolores eligendi quasi pariatur rem labore? Labore eum doloremque non illo, autem optio, excepturi ad quis reiciendis exercitationem necessitatibus fugit? Repellendus dolore ea magnam tempora in corporis sed totam et suscipit! Nihil?
<h2 id="header3">Header 3</h2>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Architecto debitis, eligendi odit quam necessitatibus enim alias perferendis ut maxime quod quae ipsam minima voluptates voluptatibus at nobis, esse sequi beatae dolor quis. Quia officiis consequuntur, delectus dolore temporibus reprehenderit reiciendis sunt perspiciatis aspernatur, facere veniam. Ad corporis a voluptate provident soluta eveniet? Sunt est deserunt amet assumenda iste odit ad placeat! Vitae aliquam aliquid, molestiae cum aut unde velit laboriosam, perferendis rem asperiores pariatur quam optio quo nostrum saepe quia id dignissimos, consequatur molestias sed nulla ipsum? Molestias ab sapiente dolores ut. Dolor vero quod, distinctio laborum expedita incidunt repudiandae.
<h2 id="header4">Header 4</h2>
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Illo consequatur, harum doloribus nisi vitae odit non deserunt et veritatis modi maxime repudiandae quasi cum eveniet inventore, fuga similique accusamus ad magnam alias qui optio delectus provident. Asperiores labore molestias quod laborum quasi sequi suscipit, optio tenetur esse soluta debitis eaque, doloribus reiciendis voluptatum iure dolorum quibusdam vel nihil quo ratione cupiditate necessitatibus aliquid obcaecati totam. Deserunt laudantium officiis et? Quas doloribus ipsum nam similique libero velit, tempora, delectus exercitationem cumque autem in iste, perspiciatis repudiandae a aliquid nobis ut voluptate corrupti unde recusandae voluptas rem aut nisi quam. Inventore, dolor.
<h2 id="header5">Header 5</h2>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Animi explicabo, numquam aliquam minus eveniet vero neque ratione quidem voluptatem ipsa officiis soluta beatae dicta eligendi quo, nemo quaerat atque mollitia! Vitae mollitia voluptatum natus iusto eum quis debitis, similique illo, libero necessitatibus illum provident ad inventore sed consectetur molestias ipsa impedit obcaecati cumque et. Eveniet, molestiae deserunt rem earum dolor neque animi dignissimos dolore atque provident at numquam repellendus aliquam adipisci officia maxime fuga unde reiciendis saepe, sint culpa recusandae. At neque sapiente mollitia doloremque, architecto voluptatem delectus nulla laboriosam dicta quo animi magnam nisi in? Voluptatum harum et est!
<h2 id="header6">Header 6</h2>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Debitis distinctio nesciunt ut similique dicta cum est quis soluta harum quam, dolorem sequi repellat, atque provident eius. Atque ea quibusdam quo! Rem nihil pariatur ex magni odio modi sed unde quidem laboriosam doloremque repellat quo eum nemo eaque mollitia adipisci exercitationem ipsam blanditiis, consectetur atque libero totam quaerat officia soluta? Cum ipsam a incidunt cumque earum quod ea quibusdam vel ratione? Minima, id voluptate! Minima cumque quisquam, quod blanditiis quas et est laudantium placeat explicabo, dolorum velit, facilis cupiditate aspernatur nostrum dicta voluptatem adipisci suscipit debitis enim ullam commodi? Magni, consequatur.
<h2 id="header7">Header 7</h2>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Blanditiis alias soluta qui accusantium in repellendus, doloremque ullam quis esse optio veniam fugit doloribus mollitia ea, dolorum rem. Unde, adipisci. Totam vel harum maiores illo nobis culpa labore corrupti quasi atque consequuntur, minus odio deleniti iure, ab natus aliquam consectetur asperiores quia eveniet dolorem similique dolore eos quisquam. Quis, ipsam corrupti? Atque molestiae omnis asperiores dolores eos obcaecati aspernatur, recusandae eaque numquam consectetur aut corporis vitae dignissimos et ipsum eum odit id incidunt voluptate perferendis! Saepe tempora iste aspernatur enim quidem labore voluptatem id dolor quam esse! Quibusdam reiciendis inventore hic!
<h2 id="header8">Header 8</h2>
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Est amet inventore quae eveniet sequi unde! Consequatur necessitatibus minima molestias quia vero recusandae unde veniam nobis qui saepe minus culpa ab rem aspernatur officiis earum et doloribus, provident eius asperiores. Harum consectetur odio blanditiis, sunt rerum necessitatibus exercitationem vero dolorem rem, cupiditate pariatur officiis repudiandae deserunt modi sequi aspernatur ratione libero perspiciatis illo cum saepe debitis tempora sapiente! Possimus modi nostrum ipsum placeat nam praesentium quos vero in, non dolor debitis dolorum nobis cum natus obcaecati, soluta reprehenderit sapiente. Eius ducimus placeat numquam incidunt magni repudiandae accusantium quasi alias vitae vero!
</div>

HTML Side by Side Paragraph's

I am unable to present two paragraph's side by side without compromising the entire format. Here is a video that better explains the issue: Video
Link to Code
Link to Site

https://jsfiddle.net/1L5emghf/
CSS:
.app {
max-width: 1000px;
margin: 0 auto;
}
.app:after {
clear:both;
}
p {
display: block;
width: calc(50% - 10px);
float: left;
margin: 5px;
background-color: #CCC;
border: 3px;
padding: 20px;
box-sizing: border-box;
}
p:nth-child(even) {
float: right;
}
Is this the solution to your problem? If you want to have the same height against the underlying element use JS (you need to give the sibling a minimum height relative to the active element)
Full solution with JS
https://jsfiddle.net/1L5emghf/1/
HTML:
<div class="app">
<p contenteditable>1 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto vero officia id fugit accusantium unde, minima assumenda veniam deleniti perferendis.</p>
<p contenteditable>2 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor qui veritatis esse voluptatum, asperiores, quam tenetur quae porro voluptatibus facilis debitis est iure recusandae voluptates. Modi sapiente maxime libero deleniti ad excepturi nam natus iusto, doloribus esse vel, recusandae repellendus iste officiis quis cupiditate blanditiis perspiciatis, facere animi. Sunt, praesentium.</p>
<p contenteditable>3 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere omnis illum aperiam voluptates error doloremque quam, totam minima corrupti doloribus magni eaque velit ex? Eveniet praesentium, delectus cumque ullam velit dicta dolorum maiores, consequatur fugit nam nulla, quas veniam tempore repellendus voluptate! Cumque adipisci nesciunt quae iste esse commodi? Minima placeat, tempora ea harum ipsam vitae? Velit laudantium quibusdam iure facilis repellendus perspiciatis temporibus maiores necessitatibus alias, amet delectus quidem quia iusto eos eveniet explicabo modi voluptatibus sit harum aut provident corporis! Culpa soluta sunt, sapiente quasi officiis aliquid vitae, repellendus, repellat consectetur voluptatem, sed quas. Modi quod ab voluptatem debitis nulla eum, in, repellat cupiditate, eos voluptas quae commodi ut incidunt sapiente soluta doloribus consequuntur saepe. Officiis deserunt ab iste quae ullam cupiditate quis possimus, incidunt, voluptates distinctio doloremque dignissimos dicta dolore quo sit. Ullam asperiores maiores aliquam sint facere cumque quidem reiciendis natus, quo nobis quod aspernatur rem sapiente ipsum, voluptatibus tenetur non id modi adipisci sunt quae provident unde in! Esse placeat et recusandae nobis iste magni dolorem assumenda similique. Tempora magni repellat, fugiat officiis quam error non quisquam blanditiis nesciunt sint consectetur dolorem voluptates sed ipsum unde. At amet culpa excepturi possimus officiis magnam, accusantium fugit cupiditate voluptatibus harum explicabo quia vitae dolorum quam beatae, eveniet! Pariatur blanditiis iusto, est porro earum neque aperiam. Laudantium minima officia dolorem sit, enim blanditiis eius aspernatur dolor, assumenda, possimus ut hic id veniam unde odit nesciunt, explicabo odio vero ex! Ipsam velit, cupiditate nisi accusamus facilis aliquid ad ab omnis eveniet dolorem quaerat ea officia, necessitatibus quasi porro doloremque quis, rerum eligendi consectetur suscipit. Enim, fugiat, non? Suscipit dolorum nam assumenda nisi ipsa, voluptatum incidunt reprehenderit dolor molestiae dolores quae adipisci, dignissimos nobis illum praesentium architecto. Libero omnis velit, nihil, est consequuntur natus accusantium. Cumque numquam modi tenetur iste.</p>
<p contenteditable>4 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem praesentium consequatur quisquam facilis, magnam consequuntur asperiores optio architecto facere, obcaecati qui omnis cupiditate aspernatur repellat inventore illum similique placeat quas?</p>
<p contenteditable>5 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit sint consequuntur non corporis hic vero ut ipsam reprehenderit rerum unde.</p>
<p contenteditable>6 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa quis quibusdam eveniet soluta, iure dolor assumenda a aliquid autem sed tempora dignissimos laudantium? Ipsa maiores dolorum, optio temporibus iste dolore est nobis aspernatur placeat numquam eos fuga rerum quae sed.</p>
<p contenteditable>7 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto debitis beatae recusandae. Provident ea aut quia nemo corporis et unde iure dignissimos assumenda sed corrupti illum, harum, itaque ad ipsum.</p>
</div>
JS:
let els = document.querySelectorAll('[contenteditable]');
function syncHeight(activeEl, siblingEl) {
siblingEl.style.minHeight = activeEl.offsetHeight + 'px';
}
function prepare(el) {
let height = el.offsetHeight;
let even = !!(Array.prototype.slice.call(el.parentNode.children).indexOf(el)%2);
if(even) {
syncHeight(el, el.previousElementSibling);
} else {
if(el.nextElementSibling) {
syncHeight(el, el.nextElementSibling);
}
}
}
for(let el of els) {
prepare(el);
el.addEventListener('input', function(e) {
prepare(el);
});
}

Since all the paragraphs are using relative positions, you can set max-width / overflow-y styles for them :
CSS
p { max-height: 154px; overflow-y: scroll; }
Inline Styles
<p styles= "max-height: 154px; overflow-y: scroll; <....>" > mmmmmmmmm </p>
Incase paragraph widths are also being affected, add max-width: 483px; overflow-x: hidden; properties

How to prevent scroll but not link following when firing touchstart event over <a> tag in pure JS?

I don't know if this is even possible but I'm trying to detect touchstart over an <a> tag. When touched, the scroll should be prevented but if the finger is released without moving, the link behaviour of opening a new window should remain.
I've realised that you cannot delay (timeout) an e.preventDefault(), as it won't work despite not throwing an error.
var a = document.querySelector('a');
a.addEventListener("touchstart", handle_touchstart);
function handle_touchstart(e){
e.preventDefault();
//do other stuff
}
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis unde, natus iusto, laborum dignissimos praesentium nam animi, ipsa inventore eius nihil! Sit nam voluptate eveniet sunt a tempore iure quibusdam!</p>
<p>Ratione inventore earum, non eveniet omnis incidunt dicta debitis, ipsum suscipit quas tenetur amet provident officiis labore, veritatis commodi consequatur! Ea dolorum, quis rerum minus quasi consequuntur eius odio reiciendis.</p>
<br>
Click here
<br>
<p>Laboriosam dicta officiis amet fuga! Atque officia, cupiditate recusandae vitae laboriosam dolorem tenetur minus. Perspiciatis nesciunt tenetur deserunt placeat similique ipsa reprehenderit! Esse ducimus laboriosam nulla, autem quibusdam corporis totam.</p>
<p>Aliquam dignissimos ex non magnam, rerum odio voluptates ducimus aspernatur. Dolorem quas, molestias dicta recusandae dolorum earum adipisci modi nemo alias accusantium eaque. At eos, dolorum et culpa quaerat recusandae!</p>
<p>Veniam tempora numquam aliquam perferendis, dolor voluptatem at, eligendi explicabo sunt minima nam debitis possimus nemo esse doloribus itaque consectetur odio rerum dolorum quasi facere saepe quidem. Laborum, cum, asperiores?</p>
<p>Magni, delectus. Illo sed blanditiis quae pariatur amet ratione quis perspiciatis error veritatis non laborum quibusdam ea, suscipit sequi esse velit doloribus ducimus ex ipsum modi aliquid tenetur. Reiciendis, eaque?</p>
How could I do that?

This should work for you. I have used touchmove, touchend and touchstart.
isTouchMove is a boolean var to detect if the user scrolled with a touch device.
// if user with a touch device is scrolling this is set to true
var isTouchMove = false;
// selectors
var body = document.querySelector('body');
var a = document.querySelector('a');
// set "isTouchMove" to true when you are scrolling
body.addEventListener("touchmove", function() {
isTouchMove = true;
});
// fire event on touch and set "isMoveTouch" to false
a.addEventListener("touchstart", function() {
isTouchMove = false;
});
// fire event when you leave the link
a.addEventListener("touchend", function() {
if(isTouchMove) return;
// your stuff
});
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis unde, natus iusto, laborum dignissimos praesentium nam animi, ipsa inventore eius nihil! Sit nam voluptate eveniet sunt a tempore iure quibusdam!</p>
<p>Ratione inventore earum, non eveniet omnis incidunt dicta debitis, ipsum suscipit quas tenetur amet provident officiis labore, veritatis commodi consequatur! Ea dolorum, quis rerum minus quasi consequuntur eius odio reiciendis.</p>
<br>
Click here
<br>
<p>Laboriosam dicta officiis amet fuga! Atque officia, cupiditate recusandae vitae laboriosam dolorem tenetur minus. Perspiciatis nesciunt tenetur deserunt placeat similique ipsa reprehenderit! Esse ducimus laboriosam nulla, autem quibusdam corporis totam.</p>
<p>Aliquam dignissimos ex non magnam, rerum odio voluptates ducimus aspernatur. Dolorem quas, molestias dicta recusandae dolorum earum adipisci modi nemo alias accusantium eaque. At eos, dolorum et culpa quaerat recusandae!</p>
<p>Veniam tempora numquam aliquam perferendis, dolor voluptatem at, eligendi explicabo sunt minima nam debitis possimus nemo esse doloribus itaque consectetur odio rerum dolorum quasi facere saepe quidem. Laborum, cum, asperiores?</p>
<p>Magni, delectus. Illo sed blanditiis quae pariatur amet ratione quis perspiciatis error veritatis non laborum quibusdam ea, suscipit sequi esse velit doloribus ducimus ex ipsum modi aliquid tenetur. Reiciendis, eaque?</p>

Navbar animation doesn't stop on scroll event with velocity.js (works with jQuery)

I have a fixed top navbar that should slide up when the user scrolls past a certain point and be replaced with a slimmer navbar. I'm using velocity.js to animate the switch with .velocity("slideUp") / ("slideDown"). However, the animation doesn't stop looping. The switch works fine with jQuery slideUp() and slideDown() though.
Here's the velocity version:
var offsetPos = $( "h1" ).offset().top;
var navFull = $( ".navbar-full" );
var navShrink = $( ".navbar-shrink" );
navShrink.hide();
function navChange() {
var scrollPos = $( this ).scrollTop();
if ( scrollPos > offsetPos ) {
navFull.velocity("slideUp");
navShrink.velocity("slideDown");
} else {
navFull.velocity("slideDown");
navShrink.velocity("slideUp");
}
}
$( window ).on( "scroll", navChange );
html, body {
position: relative;
margin: 0;
}
.content {
width: 600px;
margin: 0 auto;
position: relative;
}
nav {
position: fixed;
top: 0;
width: 100%;
z-index: 1;
}
nav p {
text-align: center;
}
.content h1 {
margin-top: 150px;
}
.navbar-full {
height: 100px;
background: blue;
}
.navbar-shrink {
height: 50px;
background: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/velocity/1.2.3/velocity.js"></script>
<nav class="navbar-full">
<p>Why doesn't this stop!</p>
</nav>
<nav class="navbar-shrink">
<p>Why doesn't this stop!</p>
</nav>
<div class="content">
<h1>Content</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod ducimus quia sed, iusto alias temporibus perspiciatis placeat omnis cupiditate laborum ex neque excepturi, ipsum. Quibusdam deleniti porro, assumenda possimus deserunt maiores ipsam non fuga est, voluptatem. Placeat beatae voluptatibus dolores id quis, sit ipsum vitae ducimus ab ipsam eos qui tempo Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur dolorum maxime hic eaque mollitia autem laboriosam eveniet dolores voluptates, nisi quos minus voluptate est placeat maiores earum assumenda ducimus laudantium. Labore obcaecati ipsum, molestiae harum, ex tenetur enim, aut asperiot consequuntur magnam magni. Eaque quidem explicabo tempora, cum numquam sint totam corporis sunt, deleniti illum perspiciatis molestiasam numquam deserunt optio molestiae deleniti maiores molestias! Beatae et non fuga consequatur ea quisquam, iusto minima cum eligendi. Molestiae possimus ipsa pariatur facilis at. Repudiandae inventore quod quis neque cumque, tenetur, cum. Numquam quas illum nihils veniam rem fuga, fugit nesciunt asperiores at facilis ut amet, quo! Laudantium consequatur quis, incidunt accusantium assumenda harum velit, saepe molestias omnis eveniet iste vel ea, eaque. Magnam porro eligendi quasi aspernatur. Numquam quis, eius?Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nobis voluptas, labore odio. Laboriosam fugit voluptate velit. Cupiditate fugit optio illum porro deserunt qui, eius corrupti, quod quia rerum, molestiae nostrum asperiores voluptates fuga animi perferendis. Perspiciatis nulla exercitationem quis aliquam fugit minus unde architecto vero nostrum quos, repellendus delectus aperiam porro, voluptatum accusamus eius. Facilis dolores culpa aliquid temporibus, inventore ad quisquam numquam, eum voluptas, harum consequuntur est deleniti! Sit odio repudiandae tempore tempora, ut eum nam rem error ipsum enim maxime fugit, laudantium quidem labore aliquam eligendi est magnam? Obcaecati qui cupiditate cum quis soluta ut quod consequuntur, iste impedit, placeat cumque excepturi optio, eligendi vel. Cupiditate ut ducimus perferendis, delectus molestias doloremque laboriosam praesentium aut nostrum reprehenderit nihil ea quam quos eligendi dignissimos cumque nulla! Quae, voluptas eius totam veniam nulla minus itaque cupiditate incidunt rem temporibus debitis suscipit iusto nemo molestiae dolorum magni excepturi minima officiis inventore repellat. Porro non cumque adipisci iusto, molestias ipsum error. Perferendis labore est, ab similique, corporis eaque facilis aliquid dolore. Deleniti ut nesciunt optio distinctio vitae placeat ipsa officiis, temporibus nemo perspiciatis magnam. Quaerat voluptatibus minus dolore iure, perspiciatis similique saepe sint at, nulla, minima voluptate commodi? Deleniti, quos mollitia fuga.</p>
</div>
And here it is working with jQuery:
CodePen
I've tried the stop() and stop(true,true) trick to no avail...
[Realise I didn't ask a question!]
So, my question is: Why does this work in jQuery and not Velocity? Is there a way to make the event fire only once, specifically, at the scroll position? - as it looks like it fires on all scroll events.
A caveat: I'm only a couple of months in to jQuery...

It doesn't exactly loop. It's just being executed a lot by the scrollEvent. jQuery is probably stateful, I'm not sure about velocity. You'll need a variable that checks if you are scrolled down enough and that it has already run once.
var offsetPos = $("h1").offset().top;
var navFull = $(".navbar-full");
var navShrink = $(".navbar-shrink");
navShrink.hide();
var animateUp = false;
var animateDown = true;
function navChange() {
var scrollPos = $(this).scrollTop();
if (scrollPos > offsetPos) {
if(animateUp === false){
animateDown = false;
animateUp = true;
navFull.velocity("slideUp");
navShrink.velocity("slideDown");
}
} else {
if(animateDown == false){
animateUp = false;
animateDown = true;
navFull.velocity("slideDown");
navShrink.velocity("slideUp");
}
}
}
$(window).on("scroll", navChange);
html,
body {
position: relative;
margin: 0;
}
.content {
width: 600px;
margin: 0 auto;
position: relative;
}
nav {
position: fixed;
top: 0;
width: 100%;
z-index: 1;
}
nav p {
text-align: center;
}
.content h1 {
margin-top: 150px;
}
.navbar-full {
height: 100px;
background: blue;
}
.navbar-shrink {
height: 50px;
background: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/velocity/1.2.3/velocity.js"></script>
<nav class="navbar-full">
<p>Why doesn't this stop!</p>
</nav>
<nav class="navbar-shrink">
<p>Why doesn't this stop!</p>
</nav>
<div class="content">
<h1>Content</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod ducimus quia sed, iusto alias temporibus perspiciatis placeat omnis cupiditate laborum ex neque excepturi, ipsum. Quibusdam deleniti porro, assumenda possimus deserunt maiores ipsam non
fuga est, voluptatem. Placeat beatae voluptatibus dolores id quis, sit ipsum vitae ducimus ab ipsam eos qui tempo Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur dolorum maxime hic eaque mollitia autem laboriosam eveniet dolores
voluptates, nisi quos minus voluptate est placeat maiores earum assumenda ducimus laudantium. Labore obcaecati ipsum, molestiae harum, ex tenetur enim, aut asperiot consequuntur magnam magni. Eaque quidem explicabo tempora, cum numquam sint totam
corporis sunt, deleniti illum perspiciatis molestiasam numquam deserunt optio molestiae deleniti maiores molestias! Beatae et non fuga consequatur ea quisquam, iusto minima cum eligendi. Molestiae possimus ipsa pariatur facilis at. Repudiandae inventore
quod quis neque cumque, tenetur, cum. Numquam quas illum nihils veniam rem fuga, fugit nesciunt asperiores at facilis ut amet, quo! Laudantium consequatur quis, incidunt accusantium assumenda harum velit, saepe molestias omnis eveniet iste vel ea,
eaque. Magnam porro eligendi quasi aspernatur. Numquam quis, eius?Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nobis voluptas, labore odio. Laboriosam fugit voluptate velit. Cupiditate fugit optio illum porro deserunt qui, eius corrupti,
quod quia rerum, molestiae nostrum asperiores voluptates fuga animi perferendis. Perspiciatis nulla exercitationem quis aliquam fugit minus unde architecto vero nostrum quos, repellendus delectus aperiam porro, voluptatum accusamus eius. Facilis dolores
culpa aliquid temporibus, inventore ad quisquam numquam, eum voluptas, harum consequuntur est deleniti! Sit odio repudiandae tempore tempora, ut eum nam rem error ipsum enim maxime fugit, laudantium quidem labore aliquam eligendi est magnam? Obcaecati
qui cupiditate cum quis soluta ut quod consequuntur, iste impedit, placeat cumque excepturi optio, eligendi vel. Cupiditate ut ducimus perferendis, delectus molestias doloremque laboriosam praesentium aut nostrum reprehenderit nihil ea quam quos eligendi
dignissimos cumque nulla! Quae, voluptas eius totam veniam nulla minus itaque cupiditate incidunt rem temporibus debitis suscipit iusto nemo molestiae dolorum magni excepturi minima officiis inventore repellat. Porro non cumque adipisci iusto, molestias
ipsum error. Perferendis labore est, ab similique, corporis eaque facilis aliquid dolore. Deleniti ut nesciunt optio distinctio vitae placeat ipsa officiis, temporibus nemo perspiciatis magnam. Quaerat voluptatibus minus dolore iure, perspiciatis
similique saepe sint at, nulla, minima voluptate commodi? Deleniti, quos mollitia fuga.</p>
</div>