HTML / CSS Hide / Show Page Objects Without JavaScript Toggle Switch

Question

How to use a single function to toggle multiple buttons/images. Here is what I have now for a demo. It only works for single button/images but I need to make multiple control.

body,
html {
  height: 100%;
}

#bg {
  background-image: url(http://basicblue.biz/treasure/treasuremap_01.jpg);
  height: 100%;
  width: 100%;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 1080px 1080px;
  position: relative;
}

#menu {
  position: absolute;
  top: 50px;
  left: 50px;
  z-index: 100;
}

#menu button {
  background-color: lightblue;
  border: 1px solid white;
  color: darkblue;
  padding: 10px 24px;
  cursor: pointer;
  display: block;
}

#mark01 {
  position: absolute;
  top: 240px;
  right: 490px;
  z-index: 80;
}

#mark02 {
  position: absolute;
  top: 480px;
  left: 460px;
  z-index: 80;
}

#mark03 {
  position: absolute;
  bottom: 260px;
  right: 490px;
  z-index: 80;
}

<!DOCTYPE html>
<html>

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="styles.css">
  <title>Treasure Map</title>
</head>

<body>

  <div id="menu">
    <button onclick="myMark01()">Marker 1</button>
    <button onclick="myMark02()">Marker 2</button>
    <button onclick="myMark03()">Marker 3</button>
  </div>

  <div id="bg">
    <img id="mark01" src="http://basicblue.biz/treasure/xmark_01.png">
    <img id="mark02" src="http://basicblue.biz/treasure/xmark_02.png">
    <img id="mark03" src="http://basicblue.biz/treasure/xmark_03.png">
  </div>

  <script>
    function myMark01() {
      var x = document.getElementById("mark01");
      if (x.style.display === "none") {
        x.style.display = "block";
      } else {
        x.style.display = "none";
      }
    }

    function myMark02() {
      var x = document.getElementById("mark02");
      if (x.style.display === "none") {
        x.style.display = "block";
      } else {
        x.style.display = "none";
      }
    }

    function myMark03() {
      var x = document.getElementById("mark03");
      if (x.style.display === "none") {
        x.style.display = "block";
      } else {
        x.style.display = "none";
      }
    }
  </script>

</body>

</html>

I want to do this with Pure HTML / CSS. Is it achievable or how to make this code more efficient.

So basically I need each button to control a different image layer allowing for individual control.

Thanks,

Yeas I will you are correct. I just wanted to get some advice on best approach from others experience. — user3146788, May 27 '20 at 16:51
You mean like checking a checkbox and hiding many elements? That **is** possible with HTML and CSS alone, but might depend a bit on your page layout. Can you provide us with some HTML? — gyohza, May 29 '20 at 00:04
I did post an answer to demonstrate this behavior, but it might be easier to help you if you elaborate a bit more if that doesn't work for you. — gyohza, May 29 '20 at 00:21
Thanks, So I would like each button or checkbox (check may be better for future styling a toggle) to toggle a separate image. Button 1 = Red Mark, Button 2 = Green, etc. — user3146788, May 29 '20 at 01:54
Also, in the example I attached, the x marks are stayin fixed in their posoiton and I have not been able to figure that probnlem out yet. — user3146788, May 29 '20 at 02:01

gyohza · Accepted Answer · 2020-05-29T00:28:49.173

This is a bit limited, but if you can use a checkbox and want a pure HTML and CSS solution, you could use the :checked CSS selector as a reference for your CSS rules to hide/show elements whenever the box is checked.

input:checked + .hidable {
  display: none;
}

input:not(:checked) + .showable {
  display: none;
}

<input type="checkbox" /> Hide text below
<div class="hidable">I am totally not hidden right now</div><br />

<input type="checkbox" /> Show some text below
<div class="showable">It seems I just got shown</div><br />

<input type="checkbox" /> Hide all the elements below, including image
<div class="hidable">
  <strong>many elements here</strong>
  <strong>hi</strong>
  <img src="https://vignette.wikia.nocookie.net/rickandmorty/images/4/41/Garmanarnar.PNG/revision/latest?cb=20160117000927" />
  <strong>bye</strong>
</div>

Actually, there is a very nice example by MDN here.

If you want to change the checkbox position in relation to the elements, you can play around with the selectors, like nth-child for instance, or you could use a grid layout - then you can place the checkbox wherever you like inside your grid template.

score 0 · Answer 2 · answered May 29 '20 at 03:13

Ok here is a modified example using the tips you provided. Thanks

body, html {
  height: 100%;
}

#bg {
  background-image: url(http://basicblue.biz/treasure/treasuremap_01.jpg);
  height: 100%;
  width: 100%;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 1080px 1080px;
  position: relative;
  }

  #menu {
    display: block;
    width: 100px;
  }

  input:checked + .hidable {
    display: none;
  }
  
  input:not(:checked) + .showable {
    display: none;
  }

  #mark01 {
    position: absolute;
    top: 240px;
    right: 490px;
  }

  #mark02 {
    position: absolute;
    top: 480px;
    left: 460px;
  }

  #mark03 {
    position: absolute;
    bottom: 260px;
    right: 490px;
  }

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="styles.css">
<title>Treasure Map</title>
</head>
<body>

  <div id="bg">
    <div id="menu">
      <input type="checkbox" /> Marker 1
      <div class="showable"><img id="mark01" src="http://basicblue.biz/treasure/xmark_01.png" alt="X Mark Red"></div>
      <input type="checkbox" /> Marker 2
      <div class="showable"><img id="mark02" src="http://basicblue.biz/treasure/xmark_02.png" alt="X Mark Green"></div>
      <input type="checkbox" /> Marker 3
      <div class="showable"><img id="mark03" src="http://basicblue.biz/treasure/xmark_03.png" alt="X Mark Magenta"></div>
    </div>
  </div>

</body>
</html>

This works really nicely. The only issue I am facing is that I have to figure out how to lock my background image and the keep the marks I am toggling on/off to their respective fixed positions. Every time the browser window is resized everything breaks visually (any tips for that?)...

Your tips helped and now pure HTML / CSS.

Thanks,

Yes, take a look at [these recipes](https://css-tricks.com/almanac/properties/b/background/). Then again, to position the X marks, I again suggest you take look at [CSS Grids](https://css-tricks.com/snippets/css/complete-guide-grid/). Tip: if you use dynamic sizing for your background, you might have a hard time with creating grid templates. Also you might want to open a new question for this. Posting another question as a solution to your own question is a little bad for the visibility of your latter question - you might miss out on great ideas from other coders. — gyohza, May 29 '20 at 03:47
Thanks again for your help and advice. I did post a new question over here: https://stackoverflow.com/questions/62092526/how-to-fixed-lock-position-of-background-image-divs-containing-images — user3146788, May 29 '20 at 18:52
Great! I'll take a look after I finish a few college assignments and maybe provide a solution if nobody else's work for you. It seems like it already has a few of them! :) — gyohza, May 29 '20 at 19:10
My friend, I have posted another similar question about my positioning. I made a more simplified example. It is regarding the use of z-index and the code you have suggested. I would be honored if you have a chance to take a look. thanks: https://stackoverflow.com/questions/62094915/z-index-not-working-to-keep-an-image-on-top-toggle-on-off-image-menu-gets-hi — user3146788, May 29 '20 at 21:48
I did take a look at it. Gladly it seems your problem is solved. :) I hope your project is doing well. — gyohza, Jun 02 '20 at 17:03

HTML / CSS Hide / Show Page Objects Without JavaScript Toggle Switch

2 Answers2