Can an element be hidden and shown without Javascript?

Question

I'm working on an app where I am using the DOMTokenList for shown and hidden an element using add() and remove() methods but the code is getting big. Example:

button.addEventListener("click", () => {
   elem1.classList.add("display-none");
   elem2.classList.remove("display-none");
   elem3.classList.remove("display-none");
   elem4.classList.add("display-none");
});

button2.addEventListener("click", () => {
   elem1.classList.remove("display-none");
   elem2.classList.add("display-none");
   elem3.classList.add("display-none");
   elem4.classList.remove("display-none");
});

I've seven code parts similar to the example and I started looking others ways but I tried with CSS

.box {
    --displayRed: block;
    --displayGreen: none;
    --displayBlue: none;
    height: 100px;
    width: 100px;
}

.box--red { 
    display: var(--displayRed);
    background-color: #ff0000;
}

.box--green { 
    display: var(--displayGreen);
    background-color: #00ff00;
}

.box--blue { 
    display: var(--displayBlue);
    background-color: #0000ff;
}

.box--red:target {
  --displayRed: block;
  --displayGreen: none;
  --displayBlue: none;
}

.box--green:target {
  --displayRed: none;
  --displayGreen: block;
  --displayBlue: none;
}

.box--blue:target {
  --displayRed: none;
  --displayGreen: none;
  --displayBlue: block;
}

<div>
    <div class="box">
        <div id="boxRed" class="box box--red"></div>
        <div id="boxGreen" class="box box--green"></div>
        <div id="boxBlue" class="box box--blue"></div>
    </div>
    
    <nav>
      <ul>
        <li><a href="#boxRed">Show red box</a></li>
        <li><a href="#boxGreen">Show green box</a></li>
        <li><a href="#boxBlue">Show blue box</a></li>
      </ul>
    </nav>
</div>

I was expecting the red box to hide when I clicked the link to show the yellow box but it only scrolled down and didn't hide the red box. I tried to find others solution with videos, Pseudo-classes, Selectors, even with two question that are Can text be hidden and shown using just CSS (no JavaScript code)? [closed] and Ocultar y Mostrar un elemento css but I can't find the perfect idea. I ACCEPT SUGGESTIONS

Answer 1

Since your goal is to hide the elements with display:none, I'll assume the DOM order doesn't matter.

So what you can do with no JS is to place your default element at the end of the container and then hide it when it's following a :targeted element:

.box {
    --displayRed: block;
    --displayGreen: none;
    --displayBlue: none;
    height: 100px;
    width: 100px;
}

.box--red { 
    display: var(--displayRed);
    background-color: #ff0000;
}

.box--green { 
    display: var(--displayGreen);
    background-color: #00ff00;
}

.box--blue { 
    display: var(--displayBlue);
    background-color: #0000ff;
}

:target ~ .box--red { /* when any other than red is selected */
  --displayRed: none;
}
.box--green:target {
  --displayRed: none;
  --displayGreen: block;
  --displayBlue: none;
}

.box--blue:target {
  --displayRed: none;
  --displayGreen: none;
  --displayBlue: block;
}

<div>
    <div class="box">
        <div id="boxGreen" class="box box--green"></div>
        <div id="boxBlue" class="box box--blue"></div>
        <!-- move the default one last -->
        <div id="boxRed" class="box box--red"></div>
    </div>
    
    <nav>
      <ul>
        <li><a href="#boxRed">Show red box</a></li>
        <li><a href="#boxGreen">Show green box</a></li>
        <li><a href="#boxBlue">Show blue box</a></li>
      </ul>
    </nav>
</div>

---

Ps: as noted by T.J Crowder in the comments below, the css-variables in here are quite useless as they won't actually reach the elements they're supposed to affect.

So you could rewrite all this without these variables and simply do:

.box {
    height: 100px;
    width: 100px;
}
/* might be better to remove the "box" class on the container but... */
.box[id] {
    display: none;
}
.box:target ~ .box--red {
    display: none;
}
.box:target {
    display: block;
}
/* This one is the default one */
.box.box--red { 
    background-color: #ff0000;
    display: block;
}
/* only the color needs to be defined for the others */
.box--green { 
    background-color: #00ff00;
}

.box--blue {
    background-color: #0000ff;
}

<div>
    <div class="box">
        <div id="boxGreen" class="box box--green"></div>
        <div id="boxBlue" class="box box--blue"></div>
        <!-- move the default one last -->
        <div id="boxRed" class="box box--red"></div>
    </div>
    
    <nav>
      <ul>
        <li><a href="#boxRed">Show red box</a></li>
        <li><a href="#boxGreen">Show green box</a></li>
        <li><a href="#boxBlue">Show blue box</a></li>
      </ul>
    </nav>
</div>