CODEWITHSUNDEEP
htmlcss
Kamil Kiełczewski
Kamil Kiełczewski

Reputation: 92367

Show elements when button was clicked

It is possible using only HTML+CSS to detect that button was clicked and show (or add some styles) to more than one element? So after click on button I want some elements to be visible (and be still visible when user click to other elements). This is what I try so far(goal - show elements with '.box' class):

/* works */
#button:checked + span {
  text-transform: uppercase;
}

/* not works :( */
#button:checked + .box {
  display: block;
}

/* set up */

input, .box { display: none;}

.btn {
  display: inline-block;
  padding: 1em 2em;
  background: linear-gradient(90deg, #5F6DFF 0%, rgba(195, 113,255, 0.88) 100%);
  box-shadow: 0px 4px 10px rgba(255, 95, 109, 0.25);
  border-radius: 40px;
  color: #fff;
  cursor: pointer;
  transition: all 0.1s linear;
}
<label class="btn" for="button">
  <input id="button" type="radio" />
  <span>Click me!</span>
</label>

<div class="containerOne">
  <div class="box">Im first</div>
  <div class="foo">Hello</div>
</div>

<div class="containerTwo">
  <div class="box">Im second</div>
  <div class="bar">world</div>
  <div class="box">Im third</div>
</div>

Upvotes: 3

Views: 668

Answers (2)

Ali
Ali

Reputation: 1336

Try with this one:

/* works */
#button:checked + .btn span {
  text-transform: uppercase;
}

/* now works :) */
#button:checked ~ .containerOne .box, 
#button:checked ~ .containerTwo .box {
    display: block;
}
/* set up */

input, .box { display: none;}

.btn {
  display: inline-block;
  padding: 1em 2em;
  background: linear-gradient(90deg, #5F6DFF 0%, rgba(195, 113,255, 0.88) 100%);
  box-shadow: 0px 4px 10px rgba(255, 95, 109, 0.25);
  border-radius: 40px;
  color: #fff;
  cursor: pointer;
  transition: all 0.1s linear;
}
<input id="button" type="radio" />
<label class="btn" for="button">
  <span>Click me!</span>  
</label> 

<div class="containerOne">
  <div class="box">Im first</div>
  <div class="foo">Hello</div>
</div>

<div class="containerTwo"> 
  <div class="box">Im second</div>
  <div class="bar">world</div>
  <div class="box">Im third</div>
</div>

Upvotes: 1

Atul Rajput
Atul Rajput

Reputation: 4178

This is only possible if you change your HTML structure like this.

/* works */
#button:checked + label span {
  text-transform: uppercase;
}

/* not works :( */
#button:checked + .box {
  display: block;
}

/* set up */

input, .box { display: none;}

.btn {
  display: inline-block;
  padding: 1em 2em;
  background: linear-gradient(90deg, #5F6DFF 0%, rgba(195, 113,255, 0.88) 100%);
  box-shadow: 0px 4px 10px rgba(255, 95, 109, 0.25);
  border-radius: 40px;
  color: #fff;
  cursor: pointer;
  transition: all 0.1s linear;
}

input:checked ~ .box {
  display: block;
}
<div class="containerOne">
<input id="button" type="radio" />
<label class="btn" for="button">
  <span>Click me!</span>
</label>
  <div class="box">Im first</div>
  <div class="foo">Hello</div>
  <div class="box">Im second</div>
  <div class="bar">world</div>
  <div class="box">Im third</div>
<div>

Upvotes: 4

Related Questions