Mimic click and unclick with CSS

Question

Is there a way to mimic an 'unclick' event with CSS only? I was able to mimic a 'click' via transition property with time delay value. The action stays put for a long time as if the button has been clicked. How do I make this element 'unclicked', or retract it back to its original state? For instance, is there a way to click elsewhere on the screen and have the .sidebar (see the included code) be 'unclicked'?

.sidebar > p {
  background: blue;
  width: 15em;
  -webkit-transition: all 0s 1000s;
  transition: all 0s 1000s;
  position: relative;
}
.sidebar:active > p {
  background: blue;
  transform: translate(60px, -40px);
  width: 40em;
  transition: all 0s;
}

<!DOCTYPE html>
<html>
<head>
</head>
<body>
  <div class='wrapper'>
    <div class='sidebar'> Sidebar
      <p>This is paragraph 1 inside sidebar </p>
      <p>This is paragraph 2 inside sidebar </p>
    </div>
    <div class='other'></div>
  </div>
</body>
</html>

Thank you very much for your input.

FYI

This is not a homework project.
I'm aware of JavaScript. This exercise is for learning CSS.
I'm aware of other possible ways to mimic a click, like described here Can I have an onclick effect in CSS? or better yet here https://tympanus.net/codrops/2012/12/17/css-click-events/

`I'm aware of other possible ways to mimic a click` --> so what do you expect ? i guess all them are there, not sure you will find more — Temani Afif, Mar 12 '18 at 20:01
I was hoping that maybe there is a way to achieve this without adding more HTML. — David.Sk, Mar 12 '18 at 20:13
Not sure why you have a transition duration of 1000 seconds. If you want the animation to stay when you click on an element, then try using `:focus` with an anchor tag instead of setting a high transition duration. — Hunter Turner, Mar 12 '18 at 20:23

Temani Afif · Answer 1 · 2018-03-12T20:36:00.327

If you don't want extra element you can use the :focus combined with tabindex attribute to have the behavior of input element. So when you click outside you lose the focus and it's like the "unclick" you want:

.sidebar {
  outline:none;
}

.sidebar > p {
  background: blue;
  width: 15em;
  position: relative;
  transition:1s;
}
.sidebar:focus > p {
  background: blue;
  transform: translate(60px, -40px);
  width: 40em;
}

<!DOCTYPE html>
<html>
<head>
</head>
<body>
  <div class='sidebar' tabindex="-1"> Sidebar
    <p>This is paragraph 1 inside sidebar </p>
    <p>This is paragraph 2 inside sidebar </p>
  </div>
  <div class='other'></div>
</body>
</html>

score 0 · Answer 2 · answered Jun 05 '18 at 17:32

Solved:

Use the combination of transition-property-delay-value, active-pseudo-classes, and descendant-selectors. Must also include transition-property:none;

.wrapper .sidebar > p {
  background: blue;
  color: white;
  visibility: hidden;
  transition: visibility 0s 1000s;
}

/* Click */
.wrapper .sidebar:active > p {
  visibility: visible;
}

/* Unclick */ 
.wrapper:active .sidebar > p {
  transition-property: none;
}

<html>
<head>
</head>
<body>
  <div class='wrapper'> Wrapper - unclick here
    <div class='sidebar'> Sidebar - click here
      <p>This is paragraph 1 inside sidebar. </p>
      <p>This is paragraph 2 inside sidebar. </p>
    </div>
  </div>
</body>
</html>

Mimic click and unclick with CSS

2 Answers2

Solved: