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?

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>

If you want the div to slide in, just change width oder right property and let it animate with css.

If you need more complex logic, javascript could be a better solution.

EDIT:

A JS Solution could looks like this:

.item{
  display: inline-block;
  cursor: pointer;
  padding: 2px;
  margin-right: 3px;
  margin-left: 3px;
  font-weight: bold;
}

.infobox{
  position: fixed;
  top: 0;
  height: 100%;
  right: -200px;
  width: 200px;
  background-color: lightblue;
  transition: right 0.6s;
}

.infobox.open{
  right: 0;
}

<div class="menu">
 <span class="item" onclick="document.querySelector('#' + this.getAttribute('data-infobox')).classList.toggle('open');" data-infobox="infobox1">Click Me!</span>
</div>
<div id="infobox1" class="infobox">
some text to show
</div>