We Keep Coding

Horizontal history timeline carousel with grouped dates using Flickity and Vanilla JS

I am trying to use the Flickity library to create a horizontal history timeline carousel. I have the basics working with data attributes, but am stuck on implementing data-nav and data-nav-title functionality. This functionality would be used to sync the .carousel-cell in the .carousel-nav with the associated .carousel-cell in the .main-carousel.
For example, the .carousel-nav .carousel-cell 1984-1988 would remain visible in the carousel until all of the associated 1984-1988 slides have been clicked/tapped/scrolled through by the user.
The following code sample details how the structure is currently set.
I have tried using "asNavFor": ".carousel-nav" and "asNavFor": ".main-carousel" in the respective DIVs with no success. I have also tried removing title from the data-nav-title attribute, but that did not work either.
Any suggestions or tips are greatly appreciated.
.carousel-container {
max-width: 1040px;
margin: 0 auto;
background-color: #f7f7f7;
overflow: hidden;
}
.carousel-nav .carousel-cell {
display: inline-block;
width: 100%;
height: 60px;
}
.carousel-nav .carousel-cell.is-selected {
font-weight: bold;
color: #A4475B;
}
.carousel-nav .end-year {
position: absolute;
top: 0;
right: 0;
}
.main-carousel .carousel-cell {
width: 100%;
}
.carousel-card p {
width: 50%;
min-width: 400px;
margin: 0 10px 0 0;
padding: 0;
background-color: #f7f7f7;
}
<link rel="stylesheet" href="https://unpkg.com/flickity#2/dist/flickity.min.css">
<script src="https://unpkg.com/flickity#2/dist/flickity.pkgd.min.js"></script>
<div class="carousel-container">
<div class="carousel-nav flickity-enabled" tabindex="0" data-flickity='{"asNavFor": ".main-carousel", "pageDots": false, "prevNextButtons": false, "draggable": false, "contain": true}'>
<div class="carousel-cell" data-nav="1984-1988">
<span class="start-year">1984</span>
<span class="end-year">1988</span>
</div>
<div class="carousel-cell" data-nav="1989-1992">
<span class="start-year">1989</span>
<span class="end-year">1992</span>
</div>
<div class="carousel-cell" data-nav="1993-1999">
<span class="start-year">1993</span>
<span class="end-year">1999</span>
</div>
<div class="carousel-cell" data-nav="2000-2002">
<span class="start-year">2000</span>
<span class="end-year">2002</span>
</div>
<div class="carousel-cell" data-nav="2003-2005">
<span class="start-year">2003</span>
<span class="end-year">2005</span>
</div>
<div class="carousel-cell" data-nav="2006-2012">
<span class="start-year">2006</span>
<span class="end-year">2012</span>
</div>
<div class="carousel-cell" data-nav="2013-2020">
<span class="start-year">2013</span>
<span class="end-year">2020</span>
</div>
</div>
<div class="main-carousel flickity-enabled is-draggable" data-flickity='{"pageDots": false}'>
<div class="carousel-cell" data-nav-title="1984-1988">
<div class="carousel-card">
<p>1984-1988</p>
<p>Medicine River Wildlife Centre (MRWC) began in the basement and barn of a rental property with no thought of a long-term plan. The vision was that a few wild animals might come to the Red Deer SPCA each year and MRWC could help to care for them
in the founder’s (Carol Kelly) rented home.</p>
</div>
</div>
<div class="carousel-cell" data-nav-title="1984-1988">
<div class="carousel-card">
<p>1984-1988</p>
<p>Wildlife Rehabilitation was a relatively new concept in Alberta and although MRWC had many supporters, there were others who questioned it, criticized the efforts, and some were outright against it. Fundraising was exceedingly difficult. Very
few people wanted to give to something they didn’t understand. The facility, vehicle, labour and many supplies came from Carol and her family. The children’s playroom became an intensive care room and the barn served as a flight area.</p>
</div>
</div>
<div class="carousel-cell" data-nav-title="1984-1988">
<div class="carousel-card">
<p>1984-1988</p>
<p>The first year saw 14 patients, admitted mostly through Red Deer Department of Fish and Wildlife (F & W).</p>
</div>
</div>
<div class="carousel-cell" data-nav-title="1984-1988">
<div class="carousel-card">
<p>1984-1988</p>
<p>For the first 2 years, MRWC was not allowed to advertise as a "wildlife" hospital but had to call themselves an “animal” hospital.</p>
</div>
</div>
<div class="carousel-cell" data-nav-title="1984-1988">
<div class="carousel-card">
<p>1984-1988</p>
<p>By the third year, MRWC was given permission to call themselves a wildlife hospital. The Red Deer Advocate did a one-page article on the Centre and the patient load increased to 284 the following year.</p>
</div>
</div>
<div class="carousel-cell" data-nav-title="1984-1988">
<div class="carousel-card">
<p>1984-1988</p>
<p>Carol contacted numerous organizations and people to help increase her knowledge and create a network, including Calgary Zoo, F & W biologists, Morris Flewwelling, Kerry Wood Nature Centre, Coaldale Birds of Prey Centre, and many more. She
joined two international wildlife rehabilitation organizations and began attending conferences.</p>
</div>
</div>
<div class="carousel-cell" data-nav-title="1984-1988">
<div class="carousel-card">
<p>1984-1988</p>
<p>She joined two international wildlife rehabilitation organizations and began attending conferences.</p>
</div>
</div>
<div class="carousel-cell" data-nav-title="1989-1992">
<div class="carousel-card">
<p>1989-1992</p>
<p>In 1989 a Banff Park Warden offered to sell the current home quarter to MRWC for $50,000. With the help of Morris Flewwelling, three co-signers were found who helped secure a $15,000 loan as a down payment. The landowner carried the balance as
a mortgage and the Centre began to build a permanent facility.</p>
</div>
</div>
<div class="carousel-cell" data-nav-title="1989-1992">
<div class="carousel-card">
<p>1989-1992</p>
<p>In 1989 a Banff Park Warden offered to sell the current home quarter to MRWC for $50,000. With the help of Morris Flewwelling, three co-signers were found who helped secure a $15,000 loan as a down payment. The landowner carried the balance as
a mortgage and the Centre began to build a permanent facility.</p>
</div>
</div>
<div class="carousel-cell" data-nav-title="1993-1999">
<div class="carousel-card">
<p>1993-1999</p>
<p>A four section, large raptor cage was built with donated labour and materials for recovering birds of prey. This cage took some months to build as it utilized with mostly donated time and labour.</p>
</div>
</div>
<div class="carousel-cell" data-nav-title="1993-1999">
<div class="carousel-card">
<p>1993-1999</p>
<p>A four section, large raptor cage was built with donated labour and materials for recovering birds of prey. This cage took some months to build as it utilized with mostly donated time and labour.</p>
</div>
</div>
<div class="carousel-cell" data-nav-title="2000-2002">
<div class="carousel-card">
<p>2000-2002</p>
<p>MRWC entered a dark time in its growth when the bank’s head office began a foreclosure. Daily phone calls continually pressured the Centre staff for the money.</p>
</div>
</div>
<div class="carousel-cell" data-nav-title="2000-2002">
<div class="carousel-card">
<p>2000-2002</p>
<p>MRWC entered a dark time in its growth when the bank’s head office began a foreclosure. Daily phone calls continually pressured the Centre staff for the money.</p>
</div>
</div>
<div class="carousel-cell" data-nav-title="2003-2005">
<div class="carousel-card">
<p>2003-2005</p>
<p>Through a great deal of hard work and a growing number of supporters, the debt was brought down from $443,000 to $150,000.</p>
</div>
</div>
<div class="carousel-cell" data-nav-title="2003-2005">
<div class="carousel-card">
<p>2003-2005</p>
<p>Through a great deal of hard work and a growing number of supporters, the debt was brought down from $443,000 to $150,000.</p>
</div>
</div>
<div class="carousel-cell" data-nav-title="2006-2012">
<div class="carousel-card">
<p>2006-2012</p>
<p>Things took a new turn for the Centre when the idea of unpaid staff was introduced in 2006. Accepting International volunteers as summer staff increased the workforce while reducing operational cost. There was a steep learning curve to develop
protocols to guide and teach 15 young people each summer, but the benefits outweighed the work.</p>
</div>
</div>
<div class="carousel-cell" data-nav-title="2006-2012">
<div class="carousel-card">
<p>2006-2012</p>
<p>Things took a new turn for the Centre when the idea of unpaid staff was introduced in 2006. Accepting International volunteers as summer staff increased the workforce while reducing operational cost. There was a steep learning curve to develop
protocols to guide and teach 15 young people each summer, but the benefits outweighed the work.</p>
</div>
</div>
<div class="carousel-cell" data-nav-title="2013-2020">
<div class="carousel-card">
<p>2013-2020</p>
<p>The City of Red Deer voted to provide MRWC with an annual payment of $25,000 for the work done to help injured wildlife, assist with wildlife conflict and provide education to the city.</p>
</div>
</div>
<div class="carousel-cell" data-nav-title="2013-2020">
<div class="carousel-card">
<p>2013-2020</p>
<p>The City of Red Deer voted to provide MRWC with an annual payment of $25,000 for the work done to help injured wildlife, assist with wildlife conflict and provide education to the city.</p>
</div>
</div>
</div>
</div>

Page Refresh Necessary for Route re-Load in ReactJS?

I have set up a few routes (menu links labeled Home|About|What I Do|Experience) for my portfolio site like so using BrowswerRouter..
When I click on any of the links the components do not load on the page or at least they are not rendering properly. In order for them to load I have to refresh the page. I know this is not the appropriate behavior. I am still learning the way of React Router. I need help with understanding why this behavior is happening and resolving this issue. Below is the import I used and the render set up I have. I just want to reiterate that when I refresh the page once I have routed to the component I want, it renders and loads correctly.
Thank you fellow coders!
A few files for your reference and the Git Repo :-)
App.js
import React, { useState, useEffect } from "react";
import { BrowserRouter as Router, Switch, Route, Link } from "react-router-dom";
import "./App.css";
import Introduction from "./components/introduction";
import About from "./components/about";
import WhatIDo from "./components/whatido";
import Timeline from "./components/timeline";
import Footer from "./components/footer";
const App = () => {
const [email, setEmail] = useState("");
const [summary, setSummary] = useState("");
const [myLinks, setMyLinks] = useState([]);
useEffect(() => {
fetch("https://gitconnected.com/v1/portfolio/kevindennyii")
.then((response) => response.json())
.then((data) => {
//setName(data.basics.name);
setEmail(data.basics.email);
setSummary(data.basics.summary);
setMyLinks(data.basics.profiles);
});
}, []);
return (
<Router>
<div id="colorlib-page" style={{ backgroundColor: "#F4F5F4" }}>
<div
id="container-wrap"
style={{ marginLeft: "5rem", marginRight: "5rem" }}
>
<div>
<section
className="colorlib-experience"
style={{
marginTop: "0px",
marginBottom: "0px",
paddingBottom: "0px",
paddingTop: "0px",
}}
data-section="home"
>
<Introduction myLinks={myLinks} email={email} />
<nav style={{ textAlign: "center" }}>
<Link to="/">Home</Link>|<Link to="/about">About</Link>|
<Link to="/expertise">What I Do</Link>|
<Link to="/experience">Experience</Link>
</nav>
</section>
<hr className="divider gradient" contentEditable />
</div>
<Switch>
{/* use the render attribute to pass props to the route with the */}
{/* arrow function because this will update the component as opposed to */}
{/* component={() => <Dashboard isAuthed={true} /> */}
<Route
path="/about"
render={(props) => <About {...props} summary={summary} />}
/>
<Route path="/expertise" render={() => <WhatIDo />} />
<Route path="/experience" component={Timeline} />
</Switch>
</div>
<Footer />
</div>
</Router>
);
};
export default App;
Couple of components
whatido.jsx
import React from "react";
const WhatIDo = () => {
return (
<section className="colorlib-about" data-section="whatido">
<div className="colorlib-narrow-content">
<div className="row">
<div
className="col-md-6 col-md-offset-3 col-md-pull-3 animate-box"
data-animate-effect="fadeInLeft"
>
<span className="heading-meta">What I do?</span>
<h2 className="colorlib-heading">Here are some of my expertise</h2>
</div>
</div>
<div className="row row-pt-md">
<div className="col-md-4 text-center animate-box">
<div className="services color-1">
<span className="icon">
<i className="icon-bulb" />
</span>
<div className="desc">
<h3>Web Development </h3>
<p>
I have experience building websites using Content Management
Systems like Wordpress. I have professional experience coding
in JavaScript, HTML, CSS, and object-oriented languages.
</p>
</div>
</div>
</div>
<div className="col-md-4 text-center animate-box">
<div className="services color-3">
<span className="icon">
<i className="icon-phone3" />
</span>
<div className="desc">
<h3>Data Structures & Algorithms</h3>
<p>
As coming from the CS background, I have good grasp over
fundamental concepts of DSA
</p>
</div>
</div>
</div>
<div className="col-md-4 text-center animate-box">
<div className="services color-5">
<span className="icon">
<i className="icon-data" />
</span>
<div className="desc">
<h3>Dev Ops</h3>
<p>
I am Amazon Web Services (AWS) certified as a Developer
Associate. I have 3 years of experiences in configuring and
managing data solution with AWS
</p>
</div>
</div>
</div>
</div>
</div>
</section>
);
};
export default WhatIDo;
timeline.jsx
import React from "react";
// TODO
const Timeline = () => {
return (
<div>
<section className="colorlib-experience" data-section="timeline">
<div className="colorlib-narrow-content">
<div className="row">
<div
className="col-md-6 col-md-offset-3 col-md-pull-3 animate-box"
data-animate-effect="fadeInLeft"
>
<span className="heading-meta">highlights</span>
<h2 className="colorlib-heading animate-box">Timeline</h2>
</div>
</div>
<div className="row">
<div className="col-md-12">
<div className="timeline-centered">
<article
className="timeline-entry animate-box"
data-animate-effect="fadeInLeft"
>
<div className="timeline-entry-inner">
<div className="timeline-icon color-3">
<i className="icon-pen2" />
</div>
<div className="timeline-label">
<h2>
Director of Operations at{" "}
<a
href="https://www.ohhdennyservices.com"
style={{ color: "#2c98f0" }}
target="_blank"
rel="noopener noreferrer"
>
OhhDenny Services, LLC
</a>{" "}
<br />
<span>June 2015 - present</span>
</h2>
<div>
<p>
We assist smaller business, mostly concentrating on
HIPPA, with Cyber Security, Software & Hardware
Installation and Updates, and Network Configuration.
We also build websites using Content Management
Systems like WordPress and technologies such
JavaScript, CSS3 & HTML5.{" "}
</p>
<p>
Network Upgrade for Ideal Nursing Services, Inc.: For
this project, I hired two other professionals to
assist with taking Ideal Nursing from a wired network
to a wireless network. Measurements of the building
were taken to create proper network diagrams for
approval by Ideal Nursing. Wires were removed and
Wireless Access Points (WAPs) were then installed and
configured. All machines were upgraded and/or
configured to connect to the WAPs. In addition, a new
rack with POE ports was installed in their server room
for their server, multi-port hub and router. This
created a more efficient working space and alleviated
unnecessary clutter.
</p>
<div>
Websites:
<ul>
<li>
<a
href="https://jacobdavidproperties.com/"
target="_blank"
rel="noopener noreferrer"
>
Jacob David Properties, LLC
</a>{" "}
- Selma , TX
</li>
<li>
<a
href="https://www.diamondgrovebaptist.com"
target="_blank"
rel="noopener noreferrer"
>
Diamond Grove Baptist Church, Inc
</a>{" "}
- Franklin, VA
</li>
<li>
<a
href="https://www.oberryamezionchurch.org"
target="_blank"
rel="noopener noreferrer"
>
O'Berry A. M. E. Zion Church
</a>{" "}
- Franklin, VA
</li>
</ul>
</div>
</div>
</div>
</div>
</article>
<article
className="timeline-entry animate-box"
data-animate-effect="fadeInTop"
>
<div className="timeline-entry-inner">
<div className="timeline-icon color-4">
<i className="icon-pen2" />
</div>
<div className="timeline-label">
<h2>
Software Engineer at iHeartMedia, Inc <br />
<span>Feb 2019 - July 2020</span>
</h2>
<p>
Currently working on iHeartMedia's Music Lab team. I
assist in the maintaining and improving of a web
application that assist in helping program directors of
iHeartRadio stations determine how air time (spins) for
songs will be distributed across radio stations. I am
working as both a Software Engineer and Data Analytics
team liaison on the Music Lab team. Some of my tasks
include architecting solutions with NodeJS, automating
AWS CodeBuilds using CloudWatch events for our MySQL
databases, improving technical documentation, and
learning both our data analytics and software
development stack (ReactJS) for Music Lab.
</p>
<p>
I conducted a Proof of Concept analysis to present to VP
of Data Engineering & Analytics for using an aiWare
platform that uses GraphQL. This was an idea to help
iHeartMedia automate the analysis of some of its market
data like spots and digital impression
</p>
<p>
Previously apart of the Salesforce team, working with
the Campaign Recap application which kept track of
iHeartMedia's clients radio ad campaigns. I briefly
worked with our Kibana instance in attempt to improve
logging. I updated our software architecture. I also
performed a technical analysis with Vertione One in
using there development platform with GraphiQ that could
possible help iHeartMedia automate some of its
processes.
</p>
</div>
</div>
</article>
<article
className="timeline-entry animate-box"
data-animate-effect="fadeInLeft"
>
<div className="timeline-entry-inner">
<div className="timeline-icon color-5">
<i className="icon-pen2" />
</div>
<div className="timeline-label">
<h2>
Lead Technologist at Booz Allen Hamilton, Inc <br />
<span>Oct 2015 - Jan 2019</span>
</h2>
<div>
I have written training documentation for the Air Force
serving as an Elastic Stack Subject Matter Expert (SME)
creating Elastic Stack training courses. This included
modules for:
<ul>
<li>The Overview of Elastic Stack</li>
<li>The understanding and use of Elasticsearch</li>
<li>The understanding and use of Logstash</li>
<li>
The understanding and use of Kibana The
understanding of Beats
</li>
</ul>
I have created learning documentation for server
configuration (Puppet) and YAML
<br />
<br />
I participated as a member of an Agile Coaching team for
the Air Force, practicing Scrum using Sprints. I wrote
guidance for development teams such as how-to-guides and
best practices for use of Agile methodologies.
<br />
<br />
I served as a member of the DoD community working as an
Application Lead/Senior Developer working with and
managing Amazing Web Services (AWS) EC2 instances
building a Java application that would create and
maintain IT disaster recovery plans.
<br />
<br />
I lead and participated on projects working with
technologies such as PostgreSQL, MongoDB, ExpressDB,
AngularJS and NodeJS (MEAN) web development, Java and
other Microsoft technologies.
<br />
<br />
Internally, for Booz Allen Hamilton, I have configured
and implemented a prototype website using Drupal with
Acquia cloud.
</div>
</div>
</div>
</article>
<article
className="timeline-entry animate-box"
data-animate-effect="fadeInLeft"
>
<div className="timeline-entry-inner">
<div className="timeline-icon color-6">
<i className="icon-pen2" />
</div>
<div className="timeline-label">
<h2>
Senior Web Developer at Sevatec, Inc <br />
<span>Nov 2014 - Jun 2015</span>
</h2>
<p>
I fulfilled the role of Web Developer as a member of the
Implementation Team for Content Management System (CMS),
redesigning of the <b>US Embassy websites</b> at the IIP
bureau of the <b>Department of State</b>. We were part
of the UI/UX team with this task. We conducted wireframe
testing, user interviews, and analysis on the both
tasks.
<br />
<br />
As a web developer, I was responsible for the
development of websites and mobile applications on
Amazon Web Services (AWS) via WordPress, assisting with
technical documentation and end-user training &
development transition plans. I participated in weekly
calls with WordPress VIP and Automattic (creators and
founders of WordPress) to receive guidance towards
implementing possible solutions for the client. I also
created and implemented the US Embassy Travel Alert
Wordpress plugin which incorporates travel warnings and
alerts using a JSON file from travel.state.gov.
</p>
</div>
</div>
</article>
<article
className="timeline-entry animate-box"
data-animate-effect="fadeInLeft"
>
<div className="timeline-entry-inner">
<div className="timeline-icon color-5">
<i className="icon-pen2" />
</div>
<div className="timeline-label">
<h2>
Software Developer at Buchanan & Edwards, Inc <br />
<span>Nov 2013 - Oct 2014</span>
</h2>
</div>
</div>
</article>
<article
className="timeline-entry animate-box"
data-animate-effect="fadeInLeft"
>
<div className="timeline-entry-inner">
<div className="timeline-icon color-3">
<i className="icon-pen2" />
</div>
<div className="timeline-label">
<h2>
Software Developer at Creative Information Technology,
Inc
<br />
<span>May 2010 - Oct 2013</span>
</h2>
</div>
</div>
</article>
<article
className="timeline-entry animate-box"
data-animate-effect="fadeInLeft"
>
<div className="timeline-entry-inner">
<div className="timeline-icon color-2">
<i className="icon-pen2" />
</div>
<div className="timeline-label">
<h2>
Web Developer/IT Consultant at Intepros Federal
Consulting, Inc
<br />
<span>Sep 2009 - Apr 2010</span>
</h2>
</div>
</div>
</article>
<article
className="timeline-entry animate-box"
data-animate-effect="fadeInLeft"
>
<div className="timeline-entry-inner">
<div className="timeline-icon color-1">
<i className="icon-pen2" />
</div>
<div className="timeline-label">
<h2>
IT Specialist at IBM, Inc <br />
<span>Aug 2007 - Sep 2009</span>
</h2>
</div>
</div>
</article>
<article
className="timeline-entry begin animate-box"
data-animate-effect="fadeInBottom"
>
<div className="timeline-entry-inner">
<div className="timeline-icon color-none" />
</div>
</article>
</div>
</div>
</div>
</div>
</section>
</div>
);
};
export default Timeline;
Nothing really showing up in the console when I inspect either...

I discovered the issues was not a React Router issues at all. It was in fact a CSS issue with this specific code found in my style.css
.js .animate-box {
opacity: 0;
}
when the routes are rendering their components, respectively the opacity is automatically set to 0. Once the page is refreshed it that using the opacity as only a transition. If I comment out the opacity, the components showed without having to refresh the page

Trying to pull a text string from block of HTML

I'm trying to pull a text string (an article title) from a piece of HTML. In this case, it's "Journalist Allegedly Spied on Zoom Meetings of Rivals in Hilariously Dumb Ways."
The problem is, the title doesn't have any identifiers I can see. It's in a few places in the HTML, but the divs it's in don't have stable names.
I tried:
var url = $(uCW).find('[href^="https://l.facebook"]').text();
But get the wrong chunk of text. (uCW is the variable name I gave to the div this is all in — it works fine for grabbing other information here). Really, I'm having trouble figuring out how to select it — in theory I could specify the exact children everything is in, but the children change a lot and I'd like to use a more stable method.
<div class="_1dwg _1w_m _q7o" data-vc-ignore-dynamic="1">
<div></div>
<div class="_4r_y">
<div class="_6a uiPopover _5pbi _cmw _b1e _1wbl" id="u_fetchstream_4_6"><a aria-label="Story options" data-testid="post_chevron_button" class="_4xev _p" aria-haspopup="true" aria-expanded="false" rel="toggle" href="#" role="button" id="u_fetchstream_4_7"></a></div>
</div>
<div>
<div class="v_zhq0t5rr6 _5eit p_zhq0tbcbb clearfix">
<div class="clearfix c_zhq0t5thj">
<a target="" class="_5pb8 u_zhq0tbcb8 _8o _8s lfloat _ohe" title="Person" aria-hidden="true" tabindex="-1" data-ft="{"tn":"m"}" href="https://www.facebook.com/j.newsham?fref=nf&__tn__=%2Cdm-R-R&eid=ARBC4Tpii73ko-nTTzvjgbhv8Uvq1GIHitUe_IHE0Ksi1su-LTuENPi9GCWskRJMLwp4VMol7R2filWQ" data-hovercard="/ajax/hovercard/user.php?id=675172323&extragetparams=%7B%22__tn__%22%3A%22%2Cdm-R-R%22%2C%22eid%22%3A%22ARBC4Tpii73ko-nTTzvjgbhv8Uvq1GIHitUe_IHE0Ksi1su-LTuENPi9GCWskRJMLwp4VMol7R2filWQ%22%7D" data-hovercard-prefer-more-content-show="1">
<div class="_38vo">
<!-- react-mount-point-unstable -->
<div><img class="_s0 _4ooo _5xib _5sq7 _44ma _rw img" src="https://scontent-ort2-2.xx.fbcdn.net/v/t1.0-1/p112x112/38427941_10156325214622324_8412493305270501376_n.jpg?_nc_cat=110&_nc_sid=dbb9e7&_nc_ohc=e5WgZHVuabcAX-4npCK&_nc_ht=scontent-ort2-2.xx&_nc_tp=6&oh=eb95679d9ee7fb5be65b6bdb23dcf7b2&oe=5ECE2ADB" alt="" aria-label="Person" role="img"></div>
</div>
</a>
<div class="clearfix _42ef">
<div class="rfloat _ohf"></div>
<div class="l_zhq0t5thg">
<div>
<div class="_6a _5u5j">
<div class="_6a _6b" style="height:40px"></div>
<div class="_6a _5u5j _6b">
<h5 class="_7tae _14f3 _14f5 _5pbw _5vra" data-ft="{"tn":"C"}" id="js_9e"><span class="fwn fcg"><span class="fwb fcg" data-ft="{"tn":";"}"><a title="Person" href="https://www.facebook.com/j.newsham?__tn__=%2CdC-R-R&eid=ARBQdCphQpNyE52IVRqnH7bi35xke_7h8ucoRhm-SykkuyeLTHQwdjplzLmwjPJI_2_SlLcyDWm9pGoB&hc_ref=ARRHpOlTgvosbrodRaKBuoiUQmaEP0kbw6SoEqUpbxJ-qgG56wADKG8zO652g3vacIc&fref=nf" data-hovercard="/ajax/hovercard/user.php?id=675172323&extragetparams=%7B%22__tn__%22%3A%22%2CdC-R-R%22%2C%22eid%22%3A%22ARBQdCphQpNyE52IVRqnH7bi35xke_7h8ucoRhm-SykkuyeLTHQwdjplzLmwjPJI_2_SlLcyDWm9pGoB%22%2C%22hc_ref%22%3A%22ARRHpOlTgvosbrodRaKBuoiUQmaEP0kbw6SoEqUpbxJ-qgG56wADKG8zO652g3vacIc%22%2C%22fref%22%3A%22nf%22%7D" data-hovercard-prefer-more-content-show="1" data-hovercard-referer="ARRHpOlTgvosbrodRaKBuoiUQmaEP0kbw6SoEqUpbxJ-qgG56wADKG8zO652g3vacIc">Person</a></span></span></h5>
<div class="_5pcp _5lel _2jyu _232_" id="feed_subtitle_675172323:7304407797214710582" data-testid="story-subtitle">
<span class="z_zhq0t6o5b"><span class="fsm fwn fcg"><a class="_5pcq" href="/j.newsham/posts/10157963951497324" target=""><abbr data-utime="1588120184" title="Tuesday, April 28, 2020 at 7:29 PM" data-shorten="1" class="_5ptz timestamp livetimestamp"><span class="timestampContent" id="js_9f">16 hrs</span></abbr></a></span></span><span class="_6spk" role="presentation" aria-hidden="true"> · </span>
<div class="_6a _29ee _4f-9 _43_1" data-hover="tooltip" data-tooltip-content="Shared with: Person's friends" role="img" aria-label="Shared with: Person's friends"><span><i class="_1lbg img sp_Ke6ZUJH-N4S_1_5x sx_73b6dc"></i></span></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="userContent"></div>
<div class="_3x-2" data-ft="{"tn":"H"}">
<div data-ft="{"tn":"H"}">
<div class="mtm">
<div id="u_fetchstream_4_1" class="_6m2 _1zpr clearfix _dcs _4_w4 _41u- _59ap _2bf7 _64lx _3eqz _20pq _3eqw _2rk1 _359m _3n1j _5qqr" data-ft="{"tn":"H"}">
<div class="clearfix _2r3x">
<div class="lfloat _ohe">
<span class="_3m6-">
<div class="_63yw">
<div class="_6ks">
<a href="https://gizmodo.com/journalist-allegedly-spied-on-zoom-meetings-of-rivals-i-1843125262?utm_campaign=Gizmodo&utm_content&utm_medium=SocialMarketing&utm_source=facebook&fbclid=IwAR3MOk2OqjX3z6DNKgdmlVDtcYQz4xIx-CRsQOuV39hVGZR_U-TjgqTKSHQ" aria-describedby="u_fetchstream_4_3" aria-label="Journalist Allegedly Spied on Zoom Meetings of Rivals in Hilariously Dumb Ways" tabindex="-1" target="_blank" rel="noopener nofollow" data-lynx-mode="asynclazy" data-lynx-uri="https://l.facebook.com/l.php?u=https%3A%2F%2Fgizmodo.com%2Fjournalist-allegedly-spied-on-zoom-meetings-of-rivals-i-1843125262%3Futm_campaign%3DGizmodo%26utm_content%26utm_medium%3DSocialMarketing%26utm_source%3Dfacebook%26fbclid%3DIwAR3MOk2OqjX3z6DNKgdmlVDtcYQz4xIx-CRsQOuV39hVGZR_U-TjgqTKSHQ&h=AT0v6E7lQPPlUT-t8yQbu0DBEukuzdXli3s4pdRZxCF9EVtUE0omFYcc-fOtFYQJIHWOVgDfrGhVsH4T3uqimv560qNSBhRnwdM_iCwl4BQJ1f9r5rrk9K1zibH3nA9ZhUT6-YdcIkm7lBZtJYn6SKbWmmPzJsBUI-LcjNoQHXw">
<div class="accessible_elem inlineBlock" id="u_fetchstream_4_3">Financial Times reporter Mark Di Stefano allegedly spied on Zoom meetings at rival newspapers the Independent and the Evening Standard to get scoops on staff cuts and furloughs due to the coronavirus pandemic, according to a report from the UK’s Independent. And he did a comically bad job of cover...</div>
<div class="_6l- __c_">
<div class="uiScaledImageContainer _6m5 fbStoryAttachmentImage" style="width:514px;height:268.42222222222px;"><img class="scaledImageFitWidth img" src="https://external-ort2-2.xx.fbcdn.net/safe_image.php?d=AQCX1CnigNk3SZXL&w=540&h=282&url=https%3A%2F%2Fi.kinja-img.com%2Fgawker-media%2Fimage%2Fupload%2Fc_fill%2Cf_auto%2Cfl_progressive%2Cg_center%2Ch_675%2Cpg_1%2Cq_80%2Cw_1200%2Fy3dmfzz6ktqefakczlow.jpg&cfs=1&upscale=1&fallback=news_d_placeholder_publisher&_nc_hash=AQAApLwXk6n73twX" data-src="https://external-ort2-2.xx.fbcdn.net/safe_image.php?d=AQCX1CnigNk3SZXL&w=540&h=282&url=https%3A%2F%2Fi.kinja-img.com%2Fgawker-media%2Fimage%2Fupload%2Fc_fill%2Cf_auto%2Cfl_progressive%2Cg_center%2Ch_675%2Cpg_1%2Cq_80%2Cw_1200%2Fy3dmfzz6ktqefakczlow.jpg&cfs=1&upscale=1&fallback=news_d_placeholder_publisher&_nc_hash=AQAApLwXk6n73twX" style="top:0px;" alt="" width="514" height="269" aria-label="photo of Journalist Allegedly Spied on Zoom Meetings of Rivals in Hilariously Dumb Ways image"></div>
</div>
</a>
</div>
<a class="_34js _8o63 _1kaa _34jt _34ju _2cpc" ajaxify="/feed/article_context/dialog/?share_id=10157963951502324&entry_type=news_feed_learn_more&trigger_log_id=bd3a8ea2-29fb-4ee2-b335-c27d26be3c85&ft_msg=mf_story_key.10157963951497324%3Atop_level_post_id.10157963951497324%3Atl_objid.10157963951497324%3Acontent_owner_id_new.675172323%3Athrowback_story_fbid.10157963951497324%3Astory_location.4%3Astory_attachment_style.share" href="#" rel="dialog-post" data-ft="{"tn":"-T"}" role="button" data-hover="tooltip" data-tooltip-content="Show more information about this link" data-tooltip-alignh="right" id="u_fetchstream_4_8"><i class="_34k2"></i></a>
</div>
<div class="_3ekx _29_4">
<div class="_6m3 _--6">
<div class="_59tj _2iau">
<div>
<div class="_6lz _6mb _1t62 ellipsis">gizmodo.com</div>
<div class=""></div>
</div>
</div>
<div class="_3n1k">
<div class="mbs _6m6 _2cnj _5s6c">Journalist Allegedly Spied on Zoom Meetings of Rivals in Hilariously Dumb Ways</div>
<div class="_6m7 _3bt9">Financial Times reporter Mark Di Stefano allegedly spied on Zoom meetings at rival newspapers the Independent and the Evening Standard to get scoops on staff cuts and furloughs due to the coronavirus pandemic, according to a report from the UK’s Independent. And he did a comically bad job of cover...</div>
</div>
</div>
<a href="https://l.facebook.com/l.php?u=https%3A%2F%2Fgizmodo.com%2Fjournalist-allegedly-spied-on-zoom-meetings-of-rivals-i-1843125262%3Futm_campaign%3DGizmodo%26utm_content%26utm_medium%3DSocialMarketing%26utm_source%3Dfacebook%26fbclid%3DIwAR2sRF3AjujE4KgspWs5ltmxgtABX46iAmdHGCVxDmWSzYu93cO_d1EMMfc&h=AT1duKty7qVugflB4dskMMBn6j1M0FJ-cneezEPDTrI6c2IcEKkCT1YZ6-8Bw2oad-n0gZZBFU5Mk-iTNkLo-up1anlYj_l_pIvZEVXz-2WPYAeQrILewicbiMd8Gj6ziLDys5z7PLZy2syfD1-HTufQ12efucyRp3hHa8mCcvGyPH1jtw" aria-label="Journalist Allegedly Spied on Zoom Meetings of Rivals in Hilariously Dumb Ways" aria-describedby="u_fetchstream_4_2" rel="noopener nofollow" tabindex="-1" target="_blank" class="_52c6" data-lynx-mode="asynclazy">
<div class="accessible_elem" id="u_fetchstream_4_2">Financial Times reporter Mark Di Stefano allegedly spied on Zoom meetings at rival newspapers the Independent and the Evening Standard to get scoops on staff cuts and furloughs due to the coronavirus pandemic, according to a report from the UK’s Independent. And he did a comically bad job of cover...</div>
</a>
</div>
</span>
</div>
<div class="_42ef"><span class="_3c21"></span></div>
</div>
</div>
</div>
</div>
</div>
<div></div>
</div>
</div>

You can get the text e.g. by selecting a href starting with l.facebook that contains an element with the class name accessible_elem using :has() as this element contains the text.
var copy = $(uCW).find('[href^="https://l.facebook"]:has(".accessible_elem")')
.find(".accessible_elem").text();
Update: As mentioned as comment, this does not target the wanted text. Instead, it's possible to read out the aria-label attribute of this link as it contains the right text:
var copy = $(ucw).find('[href^="https://l.facebook"]:has(".accessible_elem")').attr("aria-label");

JQuery toggle() append html element

I have multiple selection divs like cards. If one click on "select" then the title of that card is appended to the selection list.
My problem is the "unselect" button, which should instead remove the card title from the list. I've tried with toggle() append() and remove() without success. Card Title is appended but not removed.
function accessories(){
var accessories;
$('.accessories').toggle(function() {
accessories = $(this).closest('.card').find('.image-title').text();
acc_txt = '<p> - ' + accessories + '</p>'; //element to append and remove later.
$('#selection').append(acc_txt);
$(this).css({background: '#35a8a5', border: '1px solid #35a8a5'});
$(this).val('Unselect');
}, function() {
$('#selection').remove(acc_txt);
$(this).css({background: '', border: ''});
$(this).val('Select');
});
}
jQuery(document).ready(function() {
accessories();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-sm-4 card">
<div class="card-img">
<img src="http://skiersedge.com.sg/wp-content/uploads/2016/08/cpw-vest.jpg"/>
</div>
<h3 class="image-title text-center">Core Power Weighted Vest™</h3>
<div class="image-desc">
<p><strong>Available for all models.</strong></p>
<p>Increase the intensity of any workout with the addition of the Core Power weighted vest with soft flexible weights. This is the best fitting, most comfortable weighted vest available and is adjustable up to 22 lbs. in 1/2 lb. increments. Comes standard with 11 lbs.</p>
</div>
<input type="button" name="next" class="accessories" value="Select"/>
</div>
<div id="selection">here Should be appended the cards</div>
.accessories is the class of the button inside the card. So I search for the title .image-title and I append it. There are multiple cards on the page.
I don't know though how could I make the unselect button works.
How can I achieve it?

Please check below snippet. Here I have replaced your toggle function with click function and using .each loop find out all the selected accessories on every click so only selected accessories will found. No need to remove un-selected accessories in this case.
$(document).ready(function(){
$('.accessories').click(function() {
var current_status = $(this).val();
if(current_status=='Select'){
$(this).css({background: '#35a8a5', border: '1px solid #35a8a5'});
$(this).val('Unselect');
}else{
$(this).css({background: '', border: ''});
$(this).val('Select');
}
var accessories = "";
$('.accessories[value="Unselect"]').each(function(){
var selection = $(this).closest('.card').find('.image-title').html();
accessories += '<p> - ' + selection + '</p>';
});
$('#selection').html(accessories);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="selection">here Should be appended the cards</div><br/><br/>
<div class="col-sm-4 card">
<div class="card-img">
<img src="http://skiersedge.com.sg/wp-content/uploads/2016/08/cpw-vest.jpg"/>
</div>
<h3 class="image-title text-center">Core Power Weighted Vest™</h3>
<div class="image-desc">
<p><strong>Available for all models.</strong></p>
<p>Increase the intensity of any workout with the addition of the Core Power weighted vest with soft flexible weights. This is the best fitting, most comfortable weighted vest available and is adjustable up to 22 lbs. in 1/2 lb. increments. Comes standard with 11 lbs.</p>
</div>
<input type="button" name="next" class="accessories" value="Select"/>
</div>
<div class="col-sm-4 card">
<div class="card-img">
<img src="http://skiersedge.com.sg/wp-content/uploads/2016/08/cpw-vest.jpg"/>
</div>
<h3 class="image-title text-center">Core Power Weighted Vest™ - 1</h3>
<div class="image-desc">
<p><strong>Available for all models.</strong></p>
<p>Increase the intensity of any workout with the addition of the Core Power weighted vest with soft flexible weights. This is the best fitting, most comfortable weighted vest available and is adjustable up to 22 lbs. in 1/2 lb. increments. Comes standard with 11 lbs.</p>
</div>
<input type="button" name="next" class="accessories" value="Select"/>
</div>
<div class="col-sm-4 card">
<div class="card-img">
<img src="http://skiersedge.com.sg/wp-content/uploads/2016/08/cpw-vest.jpg"/>
</div>
<h3 class="image-title text-center">Core Power Weighted Vest™ - 2</h3>
<div class="image-desc">
<p><strong>Available for all models.</strong></p>
<p>Increase the intensity of any workout with the addition of the Core Power weighted vest with soft flexible weights. This is the best fitting, most comfortable weighted vest available and is adjustable up to 22 lbs. in 1/2 lb. increments. Comes standard with 11 lbs.</p>
</div>
<input type="button" name="next" class="accessories" value="Select"/>
</div>
<div class="col-sm-4 card">
<div class="card-img">
<img src="http://skiersedge.com.sg/wp-content/uploads/2016/08/cpw-vest.jpg"/>
</div>
<h3 class="image-title text-center">Core Power Weighted Vest™ - 3</h3>
<div class="image-desc">
<p><strong>Available for all models.</strong></p>
<p>Increase the intensity of any workout with the addition of the Core Power weighted vest with soft flexible weights. This is the best fitting, most comfortable weighted vest available and is adjustable up to 22 lbs. in 1/2 lb. increments. Comes standard with 11 lbs.</p>
</div>
<input type="button" name="next" class="accessories" value="Select"/>
</div>

Apply same height of div to other div's with padding on resize

I have 3 divs in a div.
I want to apply same height of div to all the div who has maximum height.
Not just at first time but also if screen resizes as it's responsive.
Here is my html
<div class="mid-box-mid row">
<!-- Featured Box 1 -->
<div class="mid-box col-xs-12 col-sm-4">
<div class="skt-iconbox iconbox-top">
<h4>Population<br><span>Health management</span></h4>
</div>
<div class="iconbox-content">
Our Population Health Management helps physicians and their offices to strategically manage clinical and cost opportunities by improving overall healthcare quality of individuals care effectively and efficiently.
</div>
<div class="clearfix"></div>
</div>
<!-- Featured Box 3 -->
<div class="mid-box col-xs-12 col-sm-4">
<div class="skt-iconbox iconbox-top">
<h4>Population<br><span>Health management</span></h4>
</div>
<div class="iconbox-content">
Our Population Health Management helps physicians and their offices to strategically manage clinical and cost opportunities by improving overall healthcare quality of individuals care effectively and efficiently.
</div>
<div class="clearfix"></div>
</div>
<!-- Featured Box 3 -->
<div class="mid-box col-xs-12 col-sm-4">
<div class="skt-iconbox iconbox-top">
<h4>Population<br><span>Health management</span></h4>
</div>
<div class="iconbox-content">
Our Population Health Management helps physicians and their offices to strategically manage clinical and cost opportunities by improving overall healthcare quality of individuals care effectively and efficiently.
Our Population Health Management helps physicians and their offices to strategically manage clinical and cost opportunities by improving overall healthcare quality of individuals care effectively and efficiently.
</div>
<div class="clearfix"></div>
</div>
</div>
css
.mid-box-mid{
background-color:green;
}
.mid-box{
background-color:red;
padding:80px 40px;
}
javascript although right now it's static for the 3rd div's height.
$('.mid-box-mid >div').height($('.mid-box-mid >div:nth-child(3)').height());
$( window ).resize(function() {
$('.mid-box-mid >div').height($('.mid-box-mid >div:nth-child(3)').height());
});
Here is the FIDDLE

This is a script I used often to do exactly what you're talking about.
// The Function
jQuery.fn.equalCols = function () {
$(this).css({'height' : ''});
// Array Sorter
var sortNumber = function (a, b) {
return b - a;
};
var heights = [];
// Push each height into an array
$(this).each(function () {
heights.push($(this).outerHeight());
});
heights.sort(sortNumber);
var maxHeight = heights[0];
return this.each(function () {
// Set each column to the max height
$(this).css({'height': maxHeight});
});
};
//Usage
jQuery(function($){
//Select the columns that need to be equal e.g
$('.mid-box').equalCols();
});
// Adjusts DIV size on widow Resize
$(window).resize(function () {
$('.mid-box').equalCols();
});
.mid-box-mid{
background-color:green;
}
.mid-box{
background-color:red;
padding:80px 40px;
margin:5px 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="mid-box-mid row">
<!-- Featured Box 1 -->
<div class="mid-box col-xs-12 col-sm-4">
<div class="skt-iconbox iconbox-top">
<h4>Population<br><span>Health management</span></h4>
</div>
<div class="iconbox-content">
Our Population Health Management helps physicians and their offices to strategically manage clinical and cost opportunities by improving overall healthcare quality of individuals care effectively and efficiently.
</div>
<div class="clearfix"></div>
</div>
<!-- Featured Box 3 -->
<div class="mid-box col-xs-12 col-sm-4">
<div class="skt-iconbox iconbox-top">
<h4>Population<br><span>Health management</span></h4>
</div>
<div class="iconbox-content">
Our Population Health Management helps physicians and their offices to strategically manage clinical and cost opportunities by improving overall healthcare quality of individuals care effectively and efficiently.
</div>
<div class="clearfix"></div>
</div>
<!-- Featured Box 3 -->
<div class="mid-box col-xs-12 col-sm-4">
<div class="skt-iconbox iconbox-top">
<h4>Population<br><span>Health management</span></h4>
</div>
<div class="iconbox-content">
Our Population Health Management helps physicians and their offices to strategically manage clinical and cost opportunities by improving overall healthcare quality of individuals care effectively and efficiently.
Our Population Health Management helps physicians and their offices to strategically manage clinical and cost opportunities by improving overall healthcare quality of individuals care effectively and efficiently.
</div>
<div class="clearfix"></div>
</div>
</div>

you can use the .resize function. Your code will be executed every time screen size changes and will keep your divs size syncrhonized.
$( window ).resize(function() {
$('.mid-box-mid >div').height($('.mid-box-mid >div:nth-child(3)').height());
});
please check this link to further reference:
jQuery resize