html - Slide in DIV from the right in CSS? CoolBlue example

Question

Ok, is this possible in CSS only? Check https://www.coolblue.nl/televisies and click the word: 'Advies' in the light blue menu. You'll see a new page on the right side appear with extra information without you actually leaving the productpage. This is exactly what I need, but it has to be pure CSS.

Is something like this even possible?

question from:https://stackoverflow.com/questions/65845946/slide-in-div-from-the-right-in-css-coolblue-example

Answer 1

It is possible, but it depends on what do you want to achieve.

A simple way would be to use the checkbox hack to simply create a hidden checkbox, and a lable for it, whick contains the block to display when the button is clicked. It could be something like this:

#controllbox {
    display: none;
}

.infopage{
  position: fixed;
  top: 0;
  right: 0;
  z-index: 10;
  width: 200px;
  height: 100%;
  background-color: lightblue;
  display: none;
}

#controllbox:checked + label > .infopage {
    display: block;
}

<input type="checkbox" id="controllbox"/>
<label class="linkbutton" for="controllbox">
  Click me!
  <div class="infopage">
    here the text in the info box .....
  </div>
</label>