Revision history [back]

You can use the :target pseudo-class in CSS to create a transition on click without the need for JavaScript. Here's an example:

HTML:

<div class="box">
  <a href="#clicked">Click me</a>
  <div class="content" id="clicked">
    <p>Some content here</p>
  </div>
</div>

CSS:

.box {
  position: relative;
  width: 200px;
  height: 200px;
}

.content {
  position: absolute;
  top: 0;
  left: 100%;
  width: 200px;
  height: 200px;
  background-color: #f00;
  transition: transform 0.5s ease-in-out;
  transform: translateX(-100%);
}

.content:target {
  transform: translateX(0);
}

a {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

In this example, we use the :target pseudo-class to target the clicked element with the id of "clicked". We also use the transition property to set the duration and easing of the transition between the two states. Finally, we use the transform property to move the content div from the left side of the box to the right side.