Show/hide floating div by click on right side of the screen

Question

I need to make a floating div that appears to be almost hidden and if I click in the tab it appears to the left. Floating over the rest of the site. I don't know if I made myself clear, so I put here two images, how it should look hidden and visible. But I couldn't figure it out yet how to make it. Any help will be appreciated.

I work with VueJS.

I have the whole div, but I don't know how to make it hide and when i click in the tab make it appear. — Ivan Parra, Feb 09 '22 at 02:30
set a css class, which hides it like `transform: translateX(-100%);` with `transition: transform 0.3s ease-in-out, visibility 0.3s ease-in-out;` for animations — Lawrence Cherone, Feb 09 '22 at 02:32
Thank you! I think this will work! I don't know why I didn't think about this before. — Ivan Parra, Feb 09 '22 at 02:33
np, was looking for a dupe, something like https://stackoverflow.com/questions/16989585/css-3-slide-in-from-left-transition but ported to right side — Lawrence Cherone, Feb 09 '22 at 02:34

score 3 · Accepted Answer · answered Feb 09 '22 at 02:49

This is a vanilla js implementation that uses fixed position, the css transition property for animation, and a class that is toggled when the handle is clicked to change the position.

const slideout = document.querySelector('.slideout')

const handle = slideout.querySelector('.handle')

handle.onclick = function() {
  slideout.classList.toggle('active');
}

.slideout {
  position: fixed;
  width: 80%;
  height: 80%;
  left: 100%;
  top: 10%;
  transition: left .3s ease-out;
}

.slideout.active {
  left: 10%;
}

.handle {
  position: absolute;
  top: 10px;
  left: -20px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: darkred;
  cursor: pointer;
}

.body {
  position: absolute;
  background: red;
  width: 100%;
  height: 100%;
  border-radius: 8px;
}

<div class="slideout">
  <div class="handle"></div>
  <div class="body"></div>
</div>

Thanks! this helped me a lot! I'm adapting it to my vue code. — Ivan Parra, Feb 09 '22 at 05:22

Show/hide floating div by click on right side of the screen

1 Answers1