I’m new to html/css/scss, but I’m trying to create a single page, that looks like it’s changing pages, but really is just using display: none, and display: block.

I got this working with the following code:

// Hide all sections by default
section {
  display: none;
}

// Initially display nav, hero, footer, portfolio, contact sections
#nav-section,
#hero-section,
#footer-section,
#portfolio-section,
#contact-section {
  display: block;
}

// Show about, coding, or scs sections when targeted
#about-section:target,
#coding-section:target,
#scs-section:target {
  display: block;
}

// Hide portfolio and contact when about, coding, or scs are targeted
#about-section:target ~ #portfolio-section,
#about-section:target ~ #contact-section,
#coding-section:target ~ #portfolio-section,
#coding-section:target ~ #contact-section,
#scs-section:target ~ #portfolio-section,
#scs-section:target ~ #contact-section {
  display: none;
}

// Show portfolio and contact when either is targeted
#portfolio-section:target,
#contact-section:target,
#portfolio-section:target ~ #contact-section,
#contact-section:target ~ #portfolio-section {
  display: block;
}

// Ensure other sections are hidden when portfolio or contact is targeted
#portfolio-section:target ~ #about-section,
#portfolio-section:target ~ #coding-section,
#portfolio-section:target ~ #scs-section,
#contact-section:target ~ #about-section,
#contact-section:target ~ #coding-section,
#contact-section:target ~ #scs-section {
  display: none;
}

<p><a href="#about-section">About Me</a></p>
        <p><a href="#portfolio-section">My Portfolio</a></p>
        <p><a href="#coding-section">Coding Examples</a></p>
        <p><a href="#scs-section">SCS Scheme</a></p>
        <p><a href="#contact-section">Contact Me</a></p>

Everything is working fine, but obviously it still click goes down to that part of the page, note i have a big hero image.

Is there anyway to solve this without javascript? I’m trying to see if it’s possible in html/css/scss alone.

But if not, what is the solution with javascript?

i did try and change the nav links to non relating id’s, like #coding-section to #coding.

And then the scss from:

#coding-section:target ~ #portfolio-section,
to
#coding:target ~ #portfolio-section,

but that didn’t work?