Push content to the left to reveal delete button

Question

How would I go about doing that;

this is my current wip:

   <li>
      <div class='type'><i class='fa fa-arrow-circle-right'>I</i></div>
      <div class='details'>
        <div class='date'>date</div>
        <div class='address'>1111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111</div>
       </div>
       <div class='value'>1.2</div>   
     <div class='slide-in'>
       DELETE
     </div>
   </li>

The delete button is hidden for the moment.

What should happen is, it gets revealed, and the other content is pushed "off-canvas" to the same width as this element. However, I'm unsure of how to proceed. I use display:flex and tried some positioning but it didn't work.

@SankarRaj yes, and the other content should be pushed off the screen to the left. — , Jun 10 '16 at 06:47
Hehe @SankarRaj no, the other content should be pushed off-screen, that's the difficult part :-) — , Jun 10 '16 at 06:51
I can't understood, what do you meant by 'pushed off-screen'? — Sankar, Jun 10 '16 at 07:14
Like an off-canvas menu pushes other things of screen; see https://www.sitepoint.com/pure-css-off-screen-navigation-menu/ - or look at this gif: https://github.com/ksloan/jquery-mobile-swipe-list that's exactly how i want it. @SankarRaj — , Jun 10 '16 at 07:15
Got it:) when it should goes off-screen? On hover or something else? — Sankar, Jun 10 '16 at 07:21
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/114320/discussion-between-sankar-raj-and-wesley). — Sankar, Jun 10 '16 at 07:55

score 0 · Accepted Answer · answered Jun 10 '16 at 11:34

Here you go:-

$(document).ready(function(){
  $('.list ul li .rw').click(function(){
     console.log(this);
      $(this).css("right","65px");
      $('.slide-in').css("display","block");
  })
})

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  border: 1px solid black;
}

.rw{
  padding-top: 20px;
  width:100%;
  cursor:pointer;
  position:absolute;
  padding-bottom: 20px;
  border-bottom: 1px solid #a1d1b8;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.type {
  padding-right: 15px;
  flex: 0 0 50px;
  background: green;
}

.type i {
  font-size: 40px;
}

.details {
  flex: 1;
  overflow: hidden;
  font-family: "Courier New";
}

.address {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.value {
  padding-left: 15px;
  font-size: 55px;
}

.date {
  font-weight: bold;
  margin-bottom: 5px;
}
.slide-in {
  width:65px;
  background: red;
  color: #fff;
  display:none;
}

<div id="container">
  <div class="list">
     <ul>
       <li>
       <div class="rw">
          <div class='type'><i class='fa fa-arrow-circle-right'>I</i></div>
          <div class='details'>
            <div class='date'>date</div>
            <div class='address'>1111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111</div>
           </div>
           <div class='value'>1.2</div>
            <div class='slide-in'>
           DELETE
         </div>
           </div>
        
             
       
       </li>
     </ul>
  </div>
</div>

You have include jQuery for this solution...

Push content to the left to reveal delete button

1 Answers1