After writing this block of code, I discovered that clicking on one of the circles activates it and displays the corresponding content. Now, I am looking for a way to automate this process so that every 5 seconds, a new circle gets activated along with its associated content shown. My goal is to create an endless loop of this activation.
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<style>
#timeline{height:460px;width:3px;background-color:#E6E6E6;position:absolute;left:50%;top:55px;}
a.cirle{width:15px;height:15px;background-color:#E6E6E6;border-radius:50px;position:absolute;}
a.cirle:hover{background-color:red;}
a.cirle.active{background-color:red;}
.contentquestion1{position:absolute;top:35px;margin-left:-7px;left:50%;}
.contentquestion2{position:absolute;top:225px;margin-left:-7px;left:50%;}
.contentquestion3{position:absolute;top:425px;margin-left:-7px;left:50%;}
#contentanswer {position: absolute;left: 50%;top: 200px;margin-left: 50px;}
#contentanswer1 {position: absolute;left: 50%;top: 200px;margin-left: 50px;display:none;}
#contentanswer2 {position: absolute;left: 50%;top: 200px;margin-left: 50px;display:none;}
#contentanswer3 {position: absolute;left: 50%;top: 200px;margin-left: 50px;display:none;}
</style>
</head>
<body>
<div id="timeline"></div>
<script type='text/javascript'>//<![CDATA[
$(window).load(function(){
$('[class^="contentquestion"]').on('click', function(e){
e.preventDefault();
var numb = this.className.replace('contentquestion', '');
$('[id^="contentanswer"]').fadeOut(500);
$('#contentanswer' + numb).fadeIn(500);
});
});//]]>
</script>
<script type='text/javascript'>
$(function() {
$('a.cirle').click(function() {
$('a.cirle').removeClass('active');
$(this).addClass('active');
}).eq(1).addClass('active');
});
</script>
<div class="timeline timeline1">
<div class="contentquestion1"><a class="cirle" href="#"></a></div>
<div class="contentquestion2"><a class="cirle" href="#"></a></div>
<div class="contentquestion3"><a class="cirle" href="#"></a></div>
</div>
<div class="new_member_box_display" id="contentanswer">CONTENT 2</div>
<div id="contentanswer1">CONTENT 1</div>
<div id="contentanswer2">CONTENT 2</div>
<div id="contentanswer3">CONTENT 3</div>
</body>
</html>
Codepen: http://codepen.io/anon/pen/BoWZgY