I have created a Timeline using and
I need to click on the second circle and automatically the line that is between first and second circle has to start loading with another color, something like a progress bar from the first button to the second button, to make it look like a real timeline.
The problem is that I do not know how to detect the click in any of those circles cause these were created with the pseudo element :: before.
This is my code:
ul {
align-content: center;
align-items: center;
/* counter-reset: stepCount;*/
display: flex;
justify-content: space-around;
margin-top: 40px;
/* for codepen */
}
li {
background: /*dodgerblue; */
#DBAC78;
color: white;
content: ' ';
display: flex;
flex-grow: 1;
height: .3em;
line-height: 1em;
margin: 0;
position: relative;
text-align: right;
z-index: -1;
cursor: pointer;
}
li::before {
color: white;
background: /*dodgerblue; */
#DBAC78;
border-radius: 50%;
/*counter-increment: stepCount;*/
content: '';
/*counter(stepCount); */
height: 2em;
left: -2em;
line-height: 2em;
position: absolute;
text-align: center;
top: -.85em;
width: 2em;
}
li.video::before {
color: #3A1101;
background: /*dodgerblue; */
#DBAC78;
border-radius: 50%;
/*counter-increment: stepCount;*/
content: '\f04b';
/*url('img/play2.png');*/
/*counter(stepCount); */
height: 2em;
left: -2em;
line-height: 2em;
position: absolute;
text-align: center;
top: -.85em;
width: 2em;
font-family: FontAwesome !important;
vertical-align: top;
font-weight: 700;
}
li.question::before {
color: #3A1101;
background: /*dodgerblue; */
#DBAC78;
border-radius: 50%;
/*counter-increment: stepCount;*/
content: '?';
/*counter(stepCount); */
height: 2em;
left: -2em;
line-height: 2em;
position: absolute;
text-align: center;
top: -.85em;
width: 2em;
font-weight: 700;
font-size: 1.7em;
}
li.active {
background-color: /*lightblue;*/
#DBAC78;
}
li.active~li {
background-color: /*lightblue;*/
#DBAC78;
}
li.active~li::before {
background-color: /*lightblue;*/
#DBAC78;
}
li.video {
background-color: /*lightblue;*/
#DBAC78;
}
li.video~li {
background-color: /*lightblue;*/
#DBAC78;
}
li.video~li::before {
background-color: /*lightblue;*/
#DBAC78;
}
li.question {
background-color: /*lightblue;*/
#DBAC78;
}
li.question~li {
background-color: /*lightblue;*/
#DBAC78;
}
li.question~li::before {
background-color: /*lightblue;*/
#DBAC78;
}
li:last-child {
flex-basis: 0;
flex-grow: 0;
flex-shrink: 1;
/* Shorthand: flex: 0 1 0; */
}
ul.bigger {
font-size: 1.2em;
}
ul.highlight-active li.active::before {
font-size: 1.6em;
background: /*maroon;*/
#DBAC78;
}
ul.highlight-active li.video::before {
font-size: 2em;
background: /*maroon;*/
#DBAC78;
}
ul.highlight-active li.question::before {
font-size: 1.3em;
background: /*maroon;*/
#DBAC78;
}
ul.roman li::before {
content: counter(stepCount, upper-roman);
}
ul.triangle li::before {
width: 0;
height: 0;
border-radius: 0;
border-left: 1em solid white;
border-right: 1em solid white;
border-bottom: .8em solid/*dodgerblue;*/
#DBAC78;
content: '';
top: -.65em;
}
ul.triangle li:first-child::before {
left: 0;
}
ul.triangle li.active~li::before {
border-bottom-color: /*lightblue;*/
#DBAC78;
}
ul.triangle li.video~li::before {
border-bottom-color: /*lightblue;*/
#DBAC78;
}
ul.triangle li.question~li::before {
border-bottom-color: /*lightblue;*/
#DBAC78;
}
#containerTimeLine {
width: 80%;
margin-left: 120px;
;
margin-right: 0;
padding-right: 40px;
padding-top: 30px !important;
}<div class="container" id="containerTimeLine">
<ul class="bigger highlight-active">
<li onclick="PlayAudios();"></li>
<!-- class="active" -->
<li class="video"></li>
<li class="question"></li>
<li class="question"></li>
<li class="question"></li>
<li class="question"></li>
<li></li>
</ul>
</div>How could I detect the click in the circles and execute an event with javascript / jquery that allows to change the color of the line that is between the circles, with a transition like a progress bar?
