HTML CSS Drag bar slide at the top to display more information

user_11103705 0
Viewed 828

So I want a bar that would be present on the bottom of the screen and when clicked, it slides up to display some more detailed information, then it can be clicked again to slide back down. It is very hard to explain!

This is a picture displaying it. When this is clicked I want to slide it up and fill the screen (kinda like an overlay) with information about your order (e.g where the price comes from) then it can be clicked again to slide back down.

enter image description here

I am not sure what this is called hence I am having trouble finding something similar! Thus links to something like this are very much appreciated. Please help if you can. Thank you.

css html javascript
3 Answers

You can create this effect easily with jQuery and CSS, just create a card and its parent overflow hidden, then move card on click as per your need.

$(document).ready(function(){
            $('.bar').click(function(){
                $('.card').toggleClass("showMe");
            });
        });
.wrapper {
            overflow: hidden;
            height: 175px;
            width: 200px;
            border: 1px solid #ccc;
            position: relative;
        }
        .card {
            position: absolute;
            top: 75%;
            transition: top 0.5s;
        }
        .card.showMe {
            top: 10px;
        }
        .shownInfo {display: flex;justify-content: space-between;}
        .bar {
            height: 8px;
            width: 50%;
            border-radius: 5px;
            background-color: #333;
            margin: 0 auto; 
      cursor: pointer;
        }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrapper">
    <div class="card">
        <div class="bar"></div>
        <div class="shownInfo">
            <p>Your order</p>
            <p>$123</p>
        </div>
        <div class="additionInfo">
            <h2>Show whaterve you want here.</h2>
        </div>
    </div>
    </div>

user_96229680

This type of component is normally seen in mobile apps.

It can be implemented in web apps using vanilla javascript. All you need is a absolutely positioned element that is moved up when clicked.

const slider = document.querySelector('.slider');
const sliderHead = document.querySelector('.slider .head');

slider.addEventListener('click', () => {
  slider.classList.toggle('slideUp');
});

// initially, only show slider head from the bottom of the page
function setSliderPosition(slider) {
  let sliderPaddingTop = parseInt(window.getComputedStyle(slider).paddingTop);
  const offset = slider.offsetHeight - sliderHead.offsetHeight - sliderPaddingTop;
  slider.style.bottom = `-${offset}px`;
}

setSliderPosition(slider);
p, h2 { margin: 0; }
body { overflow: hidden; background: #eee; }

.slider,
.slider::before {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  border-radius: 10px;
}

.slider {
  background: #fff;
  padding: 20px;
  width: 80%;
  cursor: pointer;
  transition: bottom 0.4s ease;
  box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);
  box-sizing: border-box;
}

.slideUp {
  bottom: 0 !important;
}

.slider::before {
  content: '';
  background: #eee;
  width: 75px;
  height: 5px;
  top: 8px;
}

.head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 50px;
  margin-bottom: 15px;
}
<div class="slider">
  <div class="head">
    <h2>Your Order</h2>
    <span>$123</span>
  </div>
  <div class="moreInfo">
  <h2>
   More Information:
  </h2>
    <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.</p>
  </div>
</div>

user_60943480

This would fall under the category of "off-canvas models", where you create a div with class, say .order-summary, and set it up with:

.order-summary {
  position: fixed;
  top: calc(100vh - 80px);
}

Here in the calculation for top, the 80px being subtracted is the visible height of the div as per your screenshot (you can update the exact height, I'm just using a rough estimation).

You can have a button to toggle the top property with simple JavaScript.

user_80801860
Related