Slide content towards the left to uncover the option to delete

Is there a way to achieve this task?

Here is what I'm currently working on:

https://jsfiddle.net/Lg0wyt9u/967/

   <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 currently hidden.

I want it to be revealed, and the rest of the content to be pushed off the screen to the same width as this element. I have tried using display:flex and positioning, but it hasn't worked as expected.

htmlcssoff-canvas-menu

Answer №1

Here is the code snippet you requested:

$(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>

Please ensure you have included jQuery for this solution.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Preventing Background Scrolling While Modal is Open in React - Using 'position: fixed' causes the page to unexpectedly scroll back to the top

Currently working on a React website where users can scroll through various posts on the homepage. Each post includes a '...' menu that, when clicked, opens up a modal with additional options. In order to prevent the background from scrolling w ...

javascripthtmlcssreactjsposition

The button similar to Facebook does not function properly when using fancybox

My photo gallery uses fancybox, and when fancybox is open a like button appears outside the title. However, the Facebook like button doesn't seem to work. Here is my JavaScript code: $(".fancyboxi").fancybox({ padding: 0, openE ...

javascriptjqueryhtmlfacebookfancybox

Strategies for transferring user input data to a function in view.py

Purpose: ** The goal is to pass the input value itemnumbervalue to the function itemnumber() in views.py > Issue encountered: The method object is not subscriptable at line 17 in view.py Attempted solutions: Case 1: Tried using both [] and () bra ...

htmldjangodjango-formsdjango-viewsdjango-templates

CSS styles are combined and included at the beginning of the index.html file

During the creation of a production version of my Angular 9.0.4 application, I noticed that the CSS is bundled and placed at the top of the dist/index.html file as shown below: <link rel="stylesheet" href="styles.6ea28d52542acb20a4c6.css"><!docty ...

cssangular

Adjusting icons based on the length of the text

When I have a title text and an icon, I want to align the icon to the left if the title fits on a single line. However, if the title spans multiple lines, then I need to align the icon to the top. I recently discovered a solution that involves using Javas ...

javascriptcssangularflexboxcss-grid

Ways to switch text on and off smoothly using transitions

I have created a webpage where text starts off hidden but has a visible heading. When you click on the heading, the text is revealed below. I am putting the final touches and aiming to make the text slide in smoothly. I am using Javascript for toggling ins ...

javascripthtmlcss

Struggling to align a button in the middle of an HTML form using flexbox - see code snippet below

Hey everyone, I’m having trouble with centering my button within the flexbox container with the class "hero". Any thoughts on why this might be happening? The button appears below the email form but is aligned to the left of it (starting at the same pos ...

htmlcssbuttonflexboxcenter

Passing variables in Redirect() without exposing them in the URL; a methodical approach

After scouring the depths of the internet, I have been on a quest to figure out how to seamlessly redirect to a new page on my site while discreetly passing a variable without exposing it in the URL like so: www.test.com/?variable=dont.want.this.here I a ...

javascripthtmlnode.js

Choosing a specific option from a dropdown menu in Angular

Whenever I try to update the province of a person using the dropdown list, it doesn't display the old province value. This issue seems to be related to the HTML rendering. This dropdown list is a crucial part of the person's information that I f ...

htmlangulardropdown

Ways to eliminate the margin space on a Bootstrap 4 progress bar

Currently experimenting with the Bootstrap 4 Progress component and attempting to integrate it within a sentence. Customizing its width to fit between words while realizing it is usually meant to occupy an entire row. Despite reducing its size, there seems ...

cssbootstrap-4

Utilize CSS to position my image in the center on mobile devices with responsive design

I am having an issue with the responsiveness of my logo image on my website's showcase section. Currently, the image is only showing up in the left corner on mobile devices, and I want it to be centered. Below is my HTML code: <section id="showca ...

htmlcssbootstrap-4

The dropdown in the Material UI GridList appears excessively wide

Currently, I'm attempting to design a grid-shaped drop-down menu in Material UI. Most of the dropdowns available in the documentation are either a single column or a single row. I tried utilizing a menu component that includes a GridList, which almost ...

cssreactjsmaterial-ui

Issues arise when trying to implement Angular SCSS with ngx-datatable

I am encountering an issue with my SCSS. It seems that the CSS command from the SCSS file below is not being utilized. This particular SCSS file is generated with the component. Interestingly, when I place the code in the styles.scss file included in the ...

cssangularhtmlsassstylesheet

Ways to retrieve the clicked item's index in a jQuery collection without using the index() method

Is there a way to obtain the index of clicked elements easily? var $inputs = $("input"); $inputs.click(function() { console.log($(this).index()) }); This method correctly works for the structure below: div>(input+input+input) However, I am encoun ...

javascriptjqueryhtml

Dots are used to indicate overflow of title in React Material UI CardHeader

Is there a way to add ellipsis dots to the title in my Cardheader when it exceeds the parent's width (Card width)? Here is what I have attempted so far: card: { width: 275, display: "flex" }, overflowWithDots: { textOverflow: &apo ...

javascriptcssreactjsmaterial-ui

Using Html.BeginForm to route to a Web Api endpoint

I need help figuring out how to make my page post to my Web API controller instead of my Area/Controller/Action. I've tried using both Html.BeginForm and Ajax.BeginForm, but haven't had any success so far. Here's what I've attempted: @ ...

c#htmlasp.net-mvcasp.net-web-api

Convert JSON data into a nested unordered list

I need help converting a JSON object into an unordered list using jQuery. Here's the JSON data I have: var myJSON = "{name:\"Director\",children:[name:\"Exe Director1\",name:\"Exe Director2\",name:\"Exe Director3&bs ...

jqueryhtmljsonhtml-lists

Ways to modify the cursor of a disabled ImageButton on an ASP.Net webpage

Within a ListView, I have dynamically generated ImageButtons. If an image does not have a link, I want to make it disabled. In the ItemDataBound event, I attempted the following approach: img.Enabled = False img.DescriptionUrl = "javascript:void(0);" img. ...

htmlasp.netcsscursorimagebutton

What is the best way to present the new segment?

Having trouble with creating new sections or content after the homepage? The issue is that the new content doesn't appear on a new page but rather on the homepage itself. An example of this problem can be seen on this CodePen project, where an h1 sect ...

htmlcssbootstrap-4bootstrap-5

Issue encountered in SQL PHP form script at line 23

I'm currently working on some code to insert data into different tables, but there seems to be an issue on line 23. This code is part of a college project registration form. <?php $con = mysql_connect(","",""); if (!$con) { die('Could not c ...

phphtmlsql