<!-- == classnames were based on context of project == -->
<div class="wrap">
<div class="timeline-wrap">
<h2 class="timeline-title">Ridoshi's responsive & interactive timeline</h2>
<p style="text-align:center;">(Click on an item in the timeline for more interaction)</p>
<ul class="timeline">
<li class="timeline-item bmw" >
<div class="p-timeline-item" >
<time class="p-timeline-date" datetime="2019-05-01">May 2019</time>
<span class="p-timeline-carmodel" data-car="1">Item 1</span>
<div class="p-timeline-block"></div>
</div>
</li>
<li class="timeline-item mini">
<div class="p-timeline-item" >
<time class="p-timeline-date" datetime="2019-06-01">June 2019</time>
<span class="p-timeline-carmodel" data-car="2">Item 2</span>
<div class="p-timeline-block"></div>
</div>
</li>
<li class="timeline-item mini" >
<div class="p-timeline-item" >
<time class="p-timeline-date" datetime="2019-07-01">July 2019</time>
<span class="p-timeline-carmodel" data-car="3">Ttem 3</span>
<div class="p-timeline-block"></div>
</div>
</li>
<li class="timeline-item bmw">
<div class="p-timeline-item" >
<time class="p-timeline-date" datetime="2019-08-01">August 2019</time>
<span class="p-timeline-carmodel" data-car="4">Item 4</span>
<div class="p-timeline-block"></div>
</div>
</li>
<li class="timeline-item bmw" >
<div class="p-timeline-item" >
<time class="p-timeline-date" datetime="2019-09-01">September 2019</time>
<span class="p-timeline-carmodel" data-car="5">Item 5</span>
<div class="p-timeline-block"></div>
</div>
</li>
<li class="timeline-item bmw">
<div class="p-timeline-item" >
<time class="p-timeline-date" datetime="2019-10-01">October 2019</time>
<span class="p-timeline-carmodel" data-car="6">Item 6</span>
<div class="p-timeline-block"></div>
</div>
</li>
<li class="timeline-item bmw" >
<div class="p-timeline-item" >
<time class="p-timeline-date" datetime="2019-11-01">November 2019</time>
<span class="p-timeline-carmodel" data-car="7">Item 7</span>
<div class="p-timeline-block"></div>
</div>
</li>
<li class="timeline-item mini">
<div class="p-timeline-item" >
<time class="p-timeline-date" datetime="2019-12-01">December 2019</time>
<span class="p-timeline-carmodel" data-car="8">Item 8</span>
<div class="p-timeline-block"></div>
</div>
</li>
</ul>
<div class="timeline-content">
<div class="p-timeline-content" data-car="1">
<div class="timeline-content-card">
<h3 class="timeline-content-title bmw">Item 1</h3>
<time class="timeline-content-date" datetime="2019-05-01">Release date: May 1, 2019</time>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed dignissim accumsan aliquam. Quisque molestie rhoncus libero, ut euismod nisl. Duis interdum maximus odio, sed pretium magna pretium eget. Donec dolor diam, congue quis velit id, pulvinar condimentum sapien. Sed gravida auctor nibh, in vehicula eros volutpat sit amet. Duis finibus rhoncus massa vel convallis. Duis placerat eleifend odio, quis faucibus libero. Vestibulum nibh turpis, blandit sed porta vel, pellentesque viverra odio.
Vestibulum congue nibh quam, non tincidunt dolor tincidunt at. Ut eu volutpat sapien. Etiam eu vestibulum leo. Aenean eget mauris fermentum, lacinia ipsum vel, imperdiet urna. Sed velit eros, elementum nec metus non, congue consequat felis. Nulla ac tellus finibus, fermentum odio in, finibus ex. Sed eu lacus enim.
Integer a ipsum enim. In hac habitasse platea dictumst. In aliquam magna et erat blandit, id consequat dui commodo. Proin a fermentum turpis, non vehicula mi. Sed sit amet arcu pretium, aliquam dui nec, tempus orci. Sed facilisis felis vitae metus sodales fermentum viverra quis ex. Sed velit lacus, elementum eget porttitor tempus, eleifend at mi. Proin in ornare dolor, vitae sollicitudin augue.</p>
<a class="btn btn-blauw timeline-content-button" href="javascript:void();" title="Lees meer">Read more</a>
<div class="close" data-type-close></div>
</div>
<div class="timeline-content-image">
<img src="https://via.placeholder.com/400x200/1C69D4/fff"/>
</div>
</div>
<div class="p-timeline-content" data-car="2">
<div class="timeline-content-card">
<h3 class="timeline-content-title mini">Item 2</h3>
<time class="timeline-content-date" datetime="2019-06-01">Release date: June 1, 2019</time>
<p> BL Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. </p>
<a class="btn btn-btn-oranje timeline-content-button" href="javascript:void();" title="Lees meer">Read more</a>
<div class="close" data-type-close></div>
</div>
<div class="timeline-content-image">
<img src="https://via.placeholder.com/900x500/ed9300/fff" alt="placeholder"/>
</div>
</div>
<div class="p-timeline-content" data-car="3">
<div class="timeline-content-card">
<h3 class="timeline-content-title mini">Item 3</h3>
<time class="timeline-content-date" datetime="2019-07-01">Release date: July 1, 2019</time>
<p> L Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. </p>
<a class="btn btn-btn-oranje timeline-content-button" href="javascript:void();" title="Lees meer">Read more</a>
<div class="close" data-type-close></div>
</div>
<div class="timeline-content-image">
<img src="https://via.placeholder.com/500x200/ed9300/fff" alt="placeholder"/>
</div>
</div>
<div class="p-timeline-content" data-car="4">
<div class="timeline-content-card">
<h3 class="timeline-content-title bmw">Item 4</h3>
<time class="timeline-content-date" datetime="2019-08-01">Release date: August 1, 2019</time>
<p> BL Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. </p>
<a class="btn btn-blauw timeline-content-button" href="javascript:void();" title="Lees meer">Read more</a>
<div class="close" data-type-close></div>
</div>
<div class="timeline-content-image">
<img src="https://via.placeholder.com/900x900/1C69D4/fff" alt="placeholder"/>
</div>
</div>
<div class="p-timeline-content" data-car="5">
<div class="timeline-content-card">
<h3 class="timeline-content-title bmw">Item 5</h3>
<time class="timeline-content-date" datetime="2019-09-01">Release date: September 1, 2019</time>
<p> L Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. </p>
<a class="btn btn-blauw timeline-content-button" href="javascript:void();" title="Lees meer">Read more</a>
<div class="close" data-type-close></div>
</div>
<div class="timeline-content-image">
<img src="https://via.placeholder.com/900x1200/1C69D4/fff" alt="placeholder"/>
</div>
</div>
<div class="p-timeline-content" data-car="6">
<div class="timeline-content-card">
<h3 class="timeline-content-title bmw">Item 6</h3>
<time class="timeline-content-date" datetime="2019-10-01">Release date: October 1, 2019</time>
<p> BL Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. </p>
<a class="btn btn-blauw timeline-content-button" href="javascript:void();" title="Lees meer">Read more</a>
<div class="close" data-type-close></div>
</div>
<div class="timeline-content-image">
<img src="https://via.placeholder.com/600x500/1C69D4/fff" alt="placeholder"/>
</div>
</div>
<div class="p-timeline-content" data-car="7">
<div class="timeline-content-card">
<h3 class="timeline-content-title bmw">Item 7</h3>
<time class="timeline-content-date" datetime="2019-11-01">Release date: November 1, 2019</time>
<p> L Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. </p>
<a class="btn btn-blauw timeline-content-button" href="javascript:void();" title="Lees meer">Read more</a>
<div class="close" data-type-close></div>
</div>
<div class="timeline-content-image">
<img src="https://via.placeholder.com/900x500/1C69D4/fff" alt="placeholder"/>
</div>
</div>
<div class="p-timeline-content" data-car="8">
<div class="timeline-content-card">
<h3 class="timeline-content-title mini">Item 8</h3>
<time class="timeline-content-date" datetime="2019-12-01">Release date: December 1, 2019</time>
<p> BL Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. </p>
<a class="btn btn-btn-oranje timeline-content-button" href="javascript:void();" title="Lees meer">Read more</a>
<div class="close" data-type-close></div>
</div>
<div class="timeline-content-image">
<img src="https://via.placeholder.com/900x500/ed9300/fff" alt="placeholder"/>
</div>
</div>
</div>
</div>
</div>/* === This project is still under development and will probably contain bugs == */
@import url('https://fonts.googleapis.com/css?family=Poppins:100,200,300,400,500,600,700,800');
* {font-family: 'Poppins',sans-serif;}
html{-moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased;}
body{padding: 0 40px; margin: 0 auto;}
h2{
width:100%;
font-size:30px;
text-align: center;
margin-top:50px;
}
h3{padding:0; margin:0;}
.wrap {
color: #000;
font-size: 14px;
line-height: 21px;
max-width: 1840px;
padding: 0 40px;
margin: 0 auto;
position: relative;
}
.btn{
min-width: 150px;
margin-bottom: 10px;
color: #fff;
display: inline-block;
font-weight: 600;
padding: 10px 20px;
text-align: center;
font-size: 14px;
line-height: 1.4;
transition: background .25s ease;
border: none;
white-space: normal;
vertical-align: middle;
overflow: visible;
cursor: pointer;
font-family: 'Poppins',sans-serif;
text-decoration: none;
background-color: #beac95;
}
.btn-blauw{background-color: #1C69D4; color: white;}
.btn-btn-oranje {background-color: #ed9300; color: white;}
.timeline-wrap{position:relative; padding:0 50px;}
.timeline{
overflow-x:auto;
-webkit-overflow-scrolling: touch;
background-repeat: repeat-x;
background-size: 10px 2px;
background-position: center top 60%;
background-image: -webkit-gradient(linear,left top,right top,color-stop(66%,#000),color-stop(0,transparent));
background-image: linear-gradient(90deg,#000 66%,transparent 0);
padding: 50px 0;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-flex: 1;
-webkit-flex: 1 1 100%;
-ms-flex: 1 1 100%;
flex: 1 1 100%;
flex-flow: row nowrap;
transition: height .2s ease-out;
transition: height .2s ease-out;
transition: height .2s ease-out;
}
.timeline-title, .timeline-content-title{font-weight:600;}
.timeline-item{
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display:flex;
justify-content: space-between;
flex-flow:wrap;
-webkit-transition: max-width .2s,-webkit-transform .4s ease-out;
transition: max-width .2s,-webkit-transform .4s ease-out;
transition: max-width .2s,transform .4s ease-out;
transition: max-width .2s,transform .4s ease-out,-webkit-transform .4s ease-out;
cursor: pointer;
margin:0 50px;
height:auto;
}
.i-is-active.timeline-item{cursor:default;}
.timeline-content{width:100%;}
.p-timeline-item:hover{transform:scale(1.1); transition:transform .3s ease;}
.bmw:hover time, .bmw.i-is-active time, .timeline-content-title.bmw{color:#1C69D4;}
.mini:hover time, .mini.i-is-active time, .timeline-content-title.mini{color:#ed9300;}
.bmw:hover time, .mini:hover time, .bmw time, .mini time{transition:color .3s ease;}
.p-timeline-item.i-is-active{cursor: default;}
.bmw:hover .p-timeline-block{background-color:#1C69D4;}
.mini:hover .p-timeline-block{background-color:#ed9300;}
.bmw .p-timeline-block, .mini .p-timeline-block, .mini:hover .p-timeline-block, .bmw:hover .p-timeline-block {transition:background-color 1s ease;}
.p-timeline-date, .p-timeline-carmodel, .p-timeline-block{width:100%;}
.p-timeline-date{font-weight:600;font-size:20px;}
.p-timeline-carmodel{margin-top: 5px;margin-bottom: 10px;}
.p-timeline-block {
min-width:55px;
min-height:55px;
max-width:55px;
max-height:55px;
border: solid 0px black;
border-radius:50%;
background-color:#beac95;
position:relative;
top:3px;
left:48px;
margin-bottom:20px;
}
.p-timeline-item{
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
flex-wrap:wrap;
min-width:150px;
max-width:150px;
position: relative;
text-align:center;
transition:color .3s ease-in-out;
transition:transform .3s ease;
}
.p-timeline-content{
width:98%;
height:0;
position:absolute;
overflow:hidden;
visibility:hidden;
opacity: 0;
transform:translateX(-1000px);
-webkit-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
padding: 50px 20px 20px 20px;
}
.i-is-active.p-timeline-content{
color: #000;
height:auto;
padding: 50px 20px 20px 20px;
float:left;
width:98%;
text-align:left;
position:relative;
visibility: visible;
opacity:1;
transform:translateX(0px);
-webkit-transition: all .5s ease-in-out;
transition: all .5s ease-in-out;
}
.i-is-active.p-timeline-content h3, .i-is-active.p-timeline-content time{width:100%;}
.i-is-active.p-timeline-content .timeline-content-card{width:40%;}
.i-is-active.p-timeline-content .timeline-content-image{width:59%;}
.i-is-active.p-timeline-content .timeline-content-card, .i-is-active.p-timeline-content .timeline-content-image{float:left;}
.i-is-active.p-timeline-content .timeline-content-image:after{clear:both;}
.i-is-active.bmw .p-timeline-block{background-color:#1C69D4;}
.i-is-active.mini .p-timeline-block{background-color:#ed9300;}
.i-is-active.p-timeline-item:hover{transform: none;}
.i-is-active .p-timeline-item{transform:scale(1.1);}
.bmw.i-is-active.p-timeline-content h3 {color:#1C69D4;}
.mini.i-is-active.p-timeline-content h3 {color:#ed9300;}
.timeline-content-image img{width:100%; height:auto; max-width:100%;}
.p-timeline-content time {font-size: 15px; line-height: 40px; font-style: italic; }
.p-timeline-content p {font-size:14px; line-height:21px; padding-right:30px; font-weight:300;}
.timeline-content-title{font-size:28px;}
.close {
position: absolute;
right: 10px;
top: 10px;
width: 32px;
height: 32px;
opacity: 0.7;
cursor: pointer;
}
.close:hover {opacity: 1;}
.close:before, .close:after {
position: absolute;
left: 15px;
content: ' ';
height: 25px;
width: 2px;
background-color: #333;
}
.close:before {transform: rotate(45deg);}
.close:after {transform: rotate(-45deg);}
/*Custom scrollbar styling*/
.timeline::-webkit-scrollbar {height:8px;}
.timeline::-webkit-scrollbar-track {box-shadow: inset 0 0 5px lightgrey; border-radius: 10px;} /* Track */
.timeline::-webkit-scrollbar-thumb {background: #beac95; border-radius: 10px;} /* Handle */
/* ========== Media Queries ========== */
/* laptop resolutions*/
@media screen and (min-device-width: 1200px) and (max-device-width: 1600px) and (-webkit-min-device-pixel-ratio: 1) {
.timeline{background-position: center top 60%;}
.i-is-active.p-timeline-content .timeline-content-card{width:48%;}
.i-is-active.p-timeline-content .timeline-content-image{width:50%;}
}
/*Tablet - Landscape*/
@media screen and (max-width: 1199px){
.timeline-content-title{font-size: 1.7em;}
.p-timeline-content time{font-size:1em;}
}
/*Tablet - Portrait*/
@media screen and (max-width: 1020px){
.p-timeline-carmodel{margin:0;}
.wrap{padding:0 40px;}
.timeline-wrap{padding:0;}
.p-timeline-content{display:flex;flex-flow: column;}
.i-is-active.p-timeline-content .timeline-content-card, .i-is-active.p-timeline-content .timeline-content-card, .i-is-active.p-timeline-content .timeline-content-image{width:100%;}
.i-is-active.p-timeline-content .timeline-content-image{padding:0; order:0; margin-bottom:20px;}
.i-is-active.p-timeline-content .timeline-content-card{padding:0; order:1;}
.i-is-active.p-timeline-content{padding-left:0; padding-right:0;}
.timeline-content-button{width:100%; padding:10px 0px;}
}
/* Mobile devices */
@media screen and (max-width: 768px){
body{padding:0;}
.timeline{background-position: center top 55%;}
.timeline-item{margin:0 10px;}
.p-timeline-block{min-width: 45px; min-height: 45px; max-width: 45px; max-height: 45px;}
.p-timeline-date{font-size:16px;}
.p-timeline-carmodel{margin:0; line-height:20px; font-size: 13px;}
.p-timeline-content time{line-height:20px;}
.p-timeline-content p{font-size:0.9em; padding-right:0px;}
.timeline-content-title{font-size:1.5em; line-height:1.3em;}
.close{right:0px;}
.timeline-title{line-height:1em; font-size:1.5em;}
.timeline::-webkit-scrollbar {height:4px;}
}
//set up global variables for all functions to use
var item = '.timeline-item';
var content = '.p-timeline-content';
var active = 'i-is-active';
//Handling events
$('.timeline-item').on('click', function(){ showTimelineContent(this); });
$('.close').on('click', function(){ closeCurrentContent(this); });
function showTimelineContent(element){
var itemId = $(element).find('.p-timeline-carmodel').attr('data-car');
var highlighted = $(element).find('.p-timeline-carmodel');
//Prevent having multiple items with the class i-is-active
if($(item).hasClass(active)){ $(item).removeClass(active); }
//grab the id from the data attribute of each contentblock
$(content).each(function(){
var contentid = $(this).attr('data-car');
//check if timeline item id is equal to the content id
//If they're equal, show the content associated to that timeline item
if(itemId == contentid){
var current = $(content +'[data-car="'+contentid+'"]');
$(current).addClass(active);
$(element).addClass(active);
//If the content is not the selected (current) one
$(content).not(current).removeClass(active);
//Scroll to shown content
var target= $(current);
$('html, body').stop().animate({ scrollTop: target.offset().top }, 1000);
}
});
}
function closeCurrentContent(event){
var contentblock = $(event).parents(content);
var contentid = $(contentblock).attr('data-car');
$(item).each(function(){
var itemId = $(this).find('.p-timeline-carmodel').attr('data-car');
if(itemId == contentid){
//move page back to timeline
var target= $('.timeline-title');
$('html, body').stop().animate({ scrollTop: target.offset().top }, 1000);
//remove class i-is-active from highlighted item
var currentItem = $(this).removeClass(active);
contentblock.removeClass(active);
}
});
}
External CSS
This Pen doesn't use any external CSS resources.