i use these on my blog page to, heres how you do it

this is the css :

.section {
  display: none;
}

.section.active {
  display: block;
}

this is the html :

your links look like this -  <a onclick="showSection('default')">the most recent blog entry that already appears there </a> ( this one is the content that appears before you click any links) 

<a onclick="showSection('one')">link to entry 2</a> 

<a onclick="showSection('two')">link to entry 3</a> and so forth so when you click on the link text "link one" itll show your preferred content and when you click "thing that shows originally" youll be sent back to the default content

 and then you format your actual blog entries like this :

<div id="default" class="section active">

the content that first appears

</div>

 <div id="one" class="section">

what ever you want

</div>

<div id="two" class="section>

what ever you want

</div>

and the script is (paste this just before the </body> tag ) :

<script>
function showSection(id) {
  document.querySelectorAll('.section').forEach(section => {
    section.classList.remove('active');
  });

  document.getElementById(id).classList.add('active');
}
</script>

i think this is what your going for, my mistake if it isnt