So I'm working on an interactive timeline. I'm not sure if Im having a brainfart or what but I don't see why this wouldn't work and I'm not receiving errors in the console.
Ideally I would for the box to expand in height while I click on it. here's the css
.arrow-left{
background: url('img/arrow-left.svg');
float: left;
width: 270px;
height: 50px;
display: flex;
justify-content: center;
flex-direction: column;
}
.arrow-right{
background: url('img/arrow-right.svg');
float: right;
width: 270px;
height: 50px;
display: flex;
justify-content: center;
flex-direction: column;
}
.text-right{
margin-top: 20px;
margin-bottom: 40px;
float: right;
text-align: left;
width: 270px;
}
.text-left{
margin-top: 20px;
margin-bottom: 40px;
padding-left: 10px;
float: left;
text-align: left;
width: 270px;
}
.timeline{
width: 100%;
text-align: center;
letter-spacing: .1em !important;
}
.left-col{
padding-top: 182px;
}
.timeline ul li {
list-style-type: none;
position: relative;
width: 6px;
margin: 0 auto;
padding-top: 50px;
background: #fff;
}
.timeline ul li::after {
content: '';
position: absolute;
left: 50%;
bottom: 0;
transform: translateX(-50%);
width: 30px;
height: 30px;
border-radius: 50%;
background: inherit;
}
.timeline ul li div {
position: relative;
bottom: 0;
width: 400px;
padding: 15px;
background: #640722;
color: #fff;
height: 45px;
overflow: hidden;
text-align: left;
}
.timeline ul li div::before {
content: '';
position: absolute;
bottom: 7px;
width: 0;
height: 0;
border-style: solid;
}
.timeline ul li:nth-child(odd) div {
left: 45px;
}
.timeline ul li:nth-child(odd) div::before {
left: -15px;
border-width: 8px 16px 8px 0;
border-color: transparent #640722 transparent transparent;
}
.timeline ul li:nth-child(even) div {
left: -439px;
}
.timeline ul li:nth-child(even) div::before {
right: -15px;
border-width: 8px 0 8px 16px;
border-color: transparent transparent transparent #640722;
}
.timeline ul li::after {
background: #fff;
transition: background .5s ease-in-out;
}
.timeline ul li.in-view::after {
background: #27e9f5;
}
.timeline ul li div {
visibility: hidden;
opacity: 0;
transition: all .5s ease-in-out;
}
.timeline ul li:nth-child(odd) div {
transform: translate3d(200px,0,0);
}
.timeline ul li:nth-child(even) div {
transform: translate3d(-200px,0,0);
}
.timeline ul li.in-view div {
transform: none;
visibility: visible;
opacity: 1;
}
.height{
height: auto !important;
}
.tl-tx{ margin-top: 20px; }
Here's the HTML
<section class="timeline">
<ul>
<li id="define">
<div class="one">
<h2 class="timeline">DEFINE GOALS <span class="glyphicon glyphicon-chevron-down" data-unicode="e114"></span></h2>
<p class="tl-tx">Reviewing and prioritizing your <b>short- and long-term goals</b>, objectives, and tolerance for risk</p>
</div>
</li>
<li>
<div>
<h2 class="timeline">REVIEW FINANCES <span class="glyphicon glyphicon-chevron-down" data-unicode="e114"></span></h2>
<p class="tl-tx">Developing a summary of your current financial situation, including a net worth statement, cash flow/budget summary, and analysis of each element of financial planning as it currently relates to your specific financial situation</p>
</div>
</li>
<li>
<div>
<h2 class="timeline">REVIEW INVESTMENTS <span class="glyphicon glyphicon-chevron-down" data-unicode="e114"></span></h2>
<p class="tl-tx"> In-depth detailed review of your <b>current investment portfolio</b> and asset management strategy development</p>
</div>
</li>
<li>
<div>
<h2 class="timeline">DEVELOP STRATEGY <span class="glyphicon glyphicon-chevron-down" data-unicode="e114"></span></h2>
<p class="tl-tx">Developing a summary of your current financial situation, including a net worth statement, cash flow/budget summary, and analysis of each element of financial planning as it currently relates to your specific financial situation</p>
</div>
</li>
<li>
<div>
<h2 class="timeline">PLAN FOR RETIREMENT <span class="glyphicon glyphicon-chevron-down" data-unicode="e114"></span></h2>
<p class="tl-tx">Completing a <b>retirement planning assessment</b>, including financial projections of assets required at estimated retirement date, desired incomerequirements and source coordination as well as using various quantitative measuring techniques, such as back testing, bear market testing and Monte Carlo analysis</p>
</div>
</li>
<li>
<div>
<h2 class="timeline">ASSESS YOUR ESTATE <span class="glyphicon glyphicon-chevron-down" data-unicode="e114"></span></h2>
<p class="tl-tx">Assessing <b>estate net worth and liquidity</b></p>
</div>
</li>
<li>
<div>
<h2 class="timeline">PLAN FOR TAXES <span class="glyphicon glyphicon-chevron-down" data-unicode="e114"></span></h2>
<p class="tl-tx">Identifying <b>tax planning strategies</b> to optimize financial position</p>
</div>
</li>
<li>
<div>
<h2 class="timeline">DELIVER COMPREHENSIVE PLAN <span class="glyphicon glyphicon-chevron-down" data-unicode="e114"></span></h2>
<p class="tl-tx">Presenting a <b>written financial plan</b> that will be reviewed in detail with you. It will contain recommendations designed to meet your stated goals and objectives, supported by relevant financial summaries</p>
</div>
</li>
<li>
<div>
<h2 class="timeline">DEVELOP ACTION PLAN <span class="glyphicon glyphicon-chevron-down" data-unicode="e114"></span></h2>
<p class="tl-tx">Developing an <b>action plan</b> to implement the agreed upon recommendations</p>
</div>
</li>
<li>
<div>
<h2 class="timeline">MAKE REFERRALS <span class="glyphicon glyphicon-chevron-down" data-unicode="e114"></span></h2>
<p class="tl-tx"><b>Referral to other</b> professionals, as required, to assist with implementation of the action plan</p>
</div>
</li>
<li>
<div>
<h2 class="timeline">ASSIST WITH IMPLEMENTATION <span class="glyphicon glyphicon-chevron-down" data-unicode="e114"></span></h2>
<p class="tl-tx">Assisting you with the <b>implementation of the financial plan</b></p>
</div>
</li>
<li>
<div>
<h2 class="timeline">REGULARLY MONITOR <span class="glyphicon glyphicon-chevron-down" data-unicode="e114"></span></h2>
<p class="tl-tx">Determining steps required to ensure your financial plan is <b>monitored and, if necessary, revised or adjusted</b></p>
</div>
</li>
<!-- more list items here -->
and the jquery in question
<script>
(function($) {
$('#define').click(function(){
$('.one').toggleClass('height');
})
});
</script>
And bellow is a link to the fiddle. Maybe I just need an extra set of eyes on it. https://jsfiddle.net/SCATORY/jwq0uLwd/
