There are numerous ways to achieve this task. Many implementations can be found in different libraries, and even Bootstrap has incorporated this feature.
However, I have quickly put together a custom solution for you to explore and interact with. Check out the Fiddle example and click on the red circles to witness how they alter the content below.
HTML:
<ul class="circles">
<li class="circle active" data-toggle="1"></li>
<li class="circle" data-toggle="2"></li>
<li class="circle" data-toggle="3"></li>
<li class="circle" data-toggle="4"></li>
<li class="circle" data-toggle="5"></li>
</ul>
<ul class="boxes">
<li class="box active" data-toggled-by="1">
<h1>Box 1</h1>
</li>
<li class="box" data-toggled-by="2">
<h1>Box 2</h1>
</li>
<li class="box" data-toggled-by="3">
<h1>Box 3</h1>
</li>
<li class="box" data-toggled-by="4">
<h1>Box 4</h1>
</li>
<li class="box" data-toggled-by="5">
<h1>Box 5</h1>
</li>
</ul>
CSS:
ul {
list-style-type: none;
}
li.circle {
display: inline-block;
border: 2px solid red;
width: 50px;
height: 50px;
background: red;
border-radius: 50px;
margin-right: 25px;
-webkit-transition: opacity .15s ease-in-out;
-moz-transition: opacity .15s ease-in-out;
transition: opacity .15s ease-in-out;
cursor: pointer;
}
li.circle:hover {
opacity: .5;
}
li.circle.active {
border-color: black;
}
li.box {
width: 90%;
display: none;
background: white;
height: 300px;
display: none;
}
li.box.active {
display: block;
}
JavaScript (jQuery):
$('.circle').click(function() {
// De-activate previously active circle
$('.circle.active').removeClass('active');
// Activate clicked circle
$(this).addClass('active');
// Get toggle ID of clicked circle
var toggleId = $(this).data('toggle');
// De-activate previously active box
$('.box.active').removeClass('active');
// Activate box with corresponding toggle ID
$('.box[data-toggled-by="' + toggleId + '"]').addClass('active');
});