<div class="page-wrapper">
	<ul class="clearfix">
		<li class="clearfix" id="farmer">
			<p class="occupation">Farmer</p>
			<div class="progress-bar">
					<div class="bar-fill">
				 		<span class="progress-bar-arrow"></span>
					</div>	
			</div>
			<p class="percentage">95%</p>
		</li>
		
		<li class="clearfix" id="teacher">
			<p class="occupation">Teacher</p>
			<div class="progress-bar">
					<div class="bar-fill">
				 		<span class="progress-bar-arrow"></span>
					</div>	
			</div>
			<p class="percentage">30%</p>
		</li>
		
		<li class="clearfix" id="blacksmith">
			<p class="occupation">Blacksmith</p>
			<div class="progress-bar">
					<div class="bar-fill">
				 		<span class="progress-bar-arrow"></span>
					</div>	
			</div>
			<p class="percentage">62%</p>
		</li>
	</ul>
	<div class="buttons">
		<button class="btn1900 active">1900</button>
		<button class="btn1920">1920</button>
	</div>
	<button class="btn1950">1950</button>
</div>
/*replicated styles in standards - do not include*/
.page-wrapper {width:80%; margin:0 auto; margin-top:50px; position:relative;}
p {margin:0; font:16px Arial, sans-serif;}
.clearfix::after{clear:both;content:"";display:table}
li {list-style:none;}

/*buttons*/
.buttons {margin:0 auto; width:250px; margin-top:20px;}
button {float:left; margin-right:20px; padding:10px 20px; cursor:pointer; border:1px solid #ccc; background-color:#eee;}
button.active {background-color:#999; color:#fff;}
button:hover {background-color:#ddd; border:1px solid #ccc; color:#000;}

/*styles you need to include*/
/*general styles for all occupations*/
li {margin-bottom:50px;}
.occupation {float:left; width:20%; text-align:right;}
.percentage {float:left; width:20%; text-align:left;}
.progress-bar {float:left; width:50%; height:20px; margin:0 30px 0 20px;}
.bar-fill {width:0%; height:100%; background-color:#ccc; border-radius:10px;
position:relative; transition: width .5s ease; }
.progress-bar-arrow {
    display: inline-block;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 20px 0 20px 20px;
    border-color: transparent transparent transparent #ccc;
	position:absolute;
	right:-10px;
	top: -10px;
}

/*styles specific to each occupation*/
/*change bar fill width to adjust size*/
#farmer .bar-fill {width:95%; background: linear-gradient(to right, #7db9e8 0%, #1E5799 100%);}
#farmer .progress-bar-arrow {border-color: transparent transparent transparent #1E5799;}
#teacher .bar-fill {width:30%; background: linear-gradient(to right, #FFEB55 0%, #FFA500 100%);}
#teacher .progress-bar-arrow {border-color: transparent transparent transparent #FFA500;}
#blacksmith .bar-fill {width:62%; background: linear-gradient(to right, #b4e391 0%, #00B700 100%);}
#blacksmith .progress-bar-arrow {border-color: transparent transparent transparent #00B700;}
$('button').each(function() {
	$(this).click(function() {			$('button').removeClass("active");
		$(this).addClass("active");
	});
});

$('.btn1900').click(function() {
	$("#farmer .bar-fill").css("width", "95%");
	$("#farmer .percentage").text("95%");
	$("#teacher .bar-fill").css("width", "30%");
	$("#teacher .percentage").text("30%");
	$("#blacksmith .bar-fill").css("width", "62%");
	$("#blacksmith .percentage").text("62%");
});

$('.btn1920').click(function() {
	$("#farmer .bar-fill").css("width", "75%");
	$("#farmer .percentage").text("75%");
	$("#teacher .bar-fill").css("width", "60%");
	$("#teacher .percentage").text("60%");
	$("#blacksmith .bar-fill").css("width", "95%");
	$("#blacksmith .percentage").text("95%");
});

$('.btn1950').click(function() {
	$("#farmer .bar-fill").css("width", "55%");
	$("#farmer .percentage").text("55%");
	$("#teacher .bar-fill").css("width", "83%");
	$("#teacher .percentage").text("83%");
	$("#blacksmith .bar-fill").css("width", "35%");
	$("#blacksmith .percentage").text("35%");
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js