using :focus to show something with a button

July 10, 2024

I have a question regarding :focus. I want to have a button/text that shows <div class="contentbox2"> when clicked, but i’m really struggling with that. I tried several ways but i can only make the contentbox show up when clicked and not "connect" it with the button.

What I want is to show the div after clicking the button and then disapear when clicking anywhere on the screen.

.morebuttonbox {
  height: 60px;
  width: 70px;
  background-image: repeating-linear-gradient( 0deg, #ecd0ff, #ecd0ff 1px, transparent 0, transparent 50%);
  background-size: 8px 8px;
  background-color: #fcf8f8;
  position: absolute;
  margin-top: 260px;
  border: 1px solid black;
  border-color: white #ae9cb9 #8b7c94 #7d6f85;
}

.morebutton {
  font-size: 14px;
  background: #e0e0e0;
  padding: 2px;
  width: 50px;
  text-align: center;
  margin: auto;
  margin-top: 16px;
  border: 1px ridge black;
  border-color: white #ae9cb9 #8b7c94 #7d6f85;
}

.contentbox2 {
  background: white;
  height: 130px;
  width: 301px;
  border: 1px solid black;
  border-color: white #ae9cb9 #8b7c94 #7d6f85;
  position: absolute;
  margin-top: 190px;
  margin-left: 69px;
  z-index: 1;
  opacity: 0;
}

.byi {
  width: 270px;
  height: 50px;
  word-break: break-word;
  margin-left: 15px;
  margin-top: 10px;
}

.dni {
  width: 270px;
  height: 50px;
  word-break: break-word;
  margin-top: 20px;
}

.more:focus~.contentbox2 {
  opacity: 1;
  z-index: 10;
}

<div class="morebuttonbox">
  <div class="morebutton">
    <a href="#" class="more">
      more
    </a>

  </div>
</div>

<div class="contentbox2">
  <div class="byi">
    <span style="background-color:#ecd0ff;color:#7d6f85;padding:1px;padding-left:5px;padding-right:5px; border-radius: 3px;   border: 1px solid black;
  border-color: white #ae9cb9 #8b7c94 #7d6f85;">byi</span> text text text text text text text text text text text text text ...

    <div class="dni">
      <span style="background-color:#ecd0ff;color:#7d6f85;padding:1px;padding-left:5px;padding-right:5px; border-radius: 3px;   border: 1px solid black;
  border-color: white #ae9cb9 #8b7c94 #7d6f85;">dni</span> text text text text text text text text text text text text text ...

    </div>
  </div>
</div>

>Solution :

See my comment to your question for the main issue. One solution would be to use the :has pseudo-class and then target the sibling of the .morebuttonbox container instead:

.morebuttonbox {
  height: 60px;
  width: 70px;
  background-image: repeating-linear-gradient( 0deg, #ecd0ff, #ecd0ff 1px, transparent 0, transparent 50%);
  background-size: 8px 8px;
  background-color: #fcf8f8;
  position: absolute;
  margin-top: 260px;
  border: 1px solid black;
  border-color: white #ae9cb9 #8b7c94 #7d6f85;
}

.morebutton {
  font-size: 14px;
  background: #e0e0e0;
  padding: 2px;
  width: 50px;
  text-align: center;
  margin: auto;
  margin-top: 16px;
  border: 1px ridge black;
  border-color: white #ae9cb9 #8b7c94 #7d6f85;
}

.contentbox2 {
  background: white;
  height: 130px;
  width: 301px;
  border: 1px solid black;
  border-color: white #ae9cb9 #8b7c94 #7d6f85;
  position: absolute;
  margin-top: 190px;
  margin-left: 69px;
  z-index: 1;
  opacity: 0;
}

.byi {
  width: 270px;
  height: 50px;
  word-break: break-word;
  margin-left: 15px;
  margin-top: 10px;
}

.dni {
  width: 270px;
  height: 50px;
  word-break: break-word;
  margin-top: 20px;
}

.morebuttonbox:has(.more:focus)~.contentbox2 {
  opacity: 1;
  z-index: 10;
}

<div class="morebuttonbox">
  <div class="morebutton">
    <button class="more">
      more
    </button>
  </div>
</div>

<div class="contentbox2">
  <div class="byi">
    <span style="background-color:#ecd0ff;color:#7d6f85;padding:1px;padding-left:5px;padding-right:5px; border-radius: 3px;   border: 1px solid black;
  border-color: white #ae9cb9 #8b7c94 #7d6f85;">byi</span> text text text text text text text text text text text text text ...

    <div class="dni">
      <span style="background-color:#ecd0ff;color:#7d6f85;padding:1px;padding-left:5px;padding-right:5px; border-radius: 3px;   border: 1px solid black;
  border-color: white #ae9cb9 #8b7c94 #7d6f85;">dni</span> text text text text text text text text text text text text text ...

    </div>
  </div>
</div>