Example
paste the following code into post's HTML tab
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#evolve").click(function(){
$("#SortedSet").animate({
left: '250px',
opacity: '0.5',
height: '150px',
width: '150px'
});
$("#SortedSet").click(function(){
alert('SortedSet');
});
$("#evolve").text("extends SortedSet");
$("#evolve").click(function(){
$("#NavigableSet").animate({
left: '550px',
opacity: '0.5',
height: '150px',
width: '150px'
});
$("#NavigableSet").click(function(){
alert('NavigableSet');
});
});
});
});
</script>
<button id="evolve">extends Set</button>
<p>Set can be extended with more specific interface!</p>
<div style="position: relative;">
<div id="Set" style="background:#98bf21;height:100px;width:100px;position:relative;" onClick="alert('Set')"></div>
<div id="SortedSet" style="background:#98bf21;height:100px;width:100px;position:relative;opacity:0.0;"></div>
<div id="NavigableSet" style="background:#98bf21;height:100px;width:100px;position:relative;opacity:0.0;"></div>
</div>
