amstrudy amstrudy - 3 months ago 4x
HTML Question

Move out-of-view divs in view

How do I move a div (that should be out of view on the far right) onto the page when another div is clicked? In the codepen below I want the green div (id = "three") to be off the page, and when the red div (id = "two") is clicked, each div moves over 50% of the page so the green div is on the right and the red div is on the left.
I can't get the green div to stay to the right or appear when I want it to.

I tried to do something like this:

$('#two').on('click', function(){
$('#three').css("right", "0");

but it didn't work at all.

Any help is appreciated!


The #three element needs a position: relative; property in order for the right: -1000px; to move the element. Once that is added, you have to tell jQuery to make that .css() change to $('#three'), not$('#slider')`.

$('#two').on('click', function() {
  $('#three').css("right", "0px");
body {
  height: 100%;
  width: 100%;
#one {
  background-color: blue;
  float: left;
#two {
  background-color: red;
  float: right;
#three {
  background-color: green;
  float: right;
  right: -1000px;
  position: relative;
  /* this is necessary to position the element using 'right' */
#three {
  height: 100%;
  width: 50%;
  display: block;
<script src=""></script>

  <div id="one"></div>
  <div id="two"></div>
  <div id="three"></div>