Can I change size of an other box with a button in it without using js-CodePudding

I want to have a box (Card1) with a button in it (Button is in Card1) (See code example ) and change the size of the Card 2 and card 1 (Make card 2 bigger and card 1 smaller). But the trick is that i cant use Js . First of all is it possible or not ?And if how ?

#card1{
  width:50%;
  background-color:red;
}
#card2{
  width:50%;
  margin-top:1%;
  background-color:green;
  height:10%;
}
#button{
  background-color:yellow;
}

<div id="card1">
  I am card 1
  <div id="button">
    Click me and make card 2 bigger and card 1 smaller
  </div>
</div>

<div id="card2">
  I am card2
<div>

CodePudding user response：

You can achieve that by creating hidden checkbox, then when it's checked select any needed element that follows it (do not make it in inner DOM or after elements, as CSS can only select "future" nodes going from root)

Here I use checkbox state :checked and select all following elements with ~

#card1{
  width:50%;
  background-color:red;
  transition: width 300ms ease-in-out;
}
#card2{
  width:50%;
  margin-top:1%;
  background-color:green;
  height:10%;
  transition: width 300ms ease-in-out;
}
#button{
  background-color:yellow;
}

#hidden-checkbox:checked ~ #card1 {
  width: 25%;
}

#hidden-checkbox:checked ~ #card2 {
  width: 75%;
}

<input type="checkbox" id="hidden-checkbox"/>

<div id="card1">
  I am card 1
  <label for="hidden-checkbox" id="button">
    Click me and make card 2 bigger and card 1 smaller
  </label>
</div>

<div id="card2">
  I am card2
<div>

CodePudding user response：

You can use Input type checkbox and inside the label, you can use card1 div, and using CSS checked selector (:checked) you can check the box and set the new width of the div2.