What is the best way to "fold" a div from the bottom upwards?

I'm looking to achieve a specific layout change when checking a checkbox, but I've run into an issue. Currently, the top portion of the content folds up while the bottom remains static. However, my goal is to have the opposite effect where the top part stays fixed and the folding starts from the bottom. Can anyone provide guidance on how to make this adjustment?

Below is the CSS code being used:

.home.payment.cyber .ade #ignore > div {
  max-height: 340px;
  transition: all .5s linear;
  overflow: hidden;
  opacity: 1;
}

.home.payment.cyber .ade #ignore #ignore_child.fold_transition {
    max-height: 5px;
    transition: all .5s linear;
    opacity: 0;
}
htmlcss

Answer №1

To create a smooth animation effect, consider animating the margin-top property along with the height property of the element simultaneously.

Here is an example:

div {
  height: 20px;
  overflow: hidden;
  transition: .5s;
}

div.toggle {
  height: 0;
  margin-top: 20px;
}
<div onclick="this.classList.toggle('toggle')">Some content</div>

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

Switch between showing and hiding a div by clicking on an image

Currently, I am experimenting with the toggle div function and utilizing images as triggers for toggling. For instance, when a div is closed, an image of a "plus" sign indicates to the user that it can be expanded, and vice versa for compressing the div. T ...

javascripthtmljqueryjquery-uijquery-events

Is there a way to discern when a particular element has been clicked on?

Please complete the following two steps: Click on the input to focus on it Then click on the button $("input").on({ focusout: function() { this.value += "one|"; } }); $("button").on("click", function(){ $old_val = $("input").val(); $( ...

javascriptjqueryhtml

Discovering the block's height with the power of Jquery

I have written a piece of code that sets the height of a block of text and then applies that height to an image within the block. However, the size of the image ends up being smaller than the size of the block. https://i.stack.imgur.com/QUFWy.png <scr ...

jqueryhtmlcsscarousel

Ways to manipulate the placement of angular material 2 sidenav content to the bottom

I have been experimenting with various methods in CSS to override the existing side nav component in Angular Material 2. mat-sidenav-container { background: white; bottom: 0px !important; /* <---- no success */ } mat-sidenav { width: 300px; ...

cssangularangular-material2

Creating a dropdown menu that includes miniature images: A step-by-step guide

Specifics I am interested in incorporating a small flag to the left of my dropdown menu. I need guidance on the recommended method for achieving this. My Attempt So Far <!-- Dropdown-Menu --> <div class="col-sm-6 drop-down "> S ...

phpjquerycsshtml

What is the optimal choice: Using Stack with direction="horizontal" or employing display flex in React Bootstrap?

In my opinion, the two functions may seem similar, but from personal experience I tend to favor using display flex over Stack in react boostrap. I find that display flex offers more flexibility when it comes to spacing out objects. Would anyone be able to ...

cssreactjsstackbootstrap-5react-bootstrap

Having trouble with your website div not appearing correctly on Firefox?

I'm facing an issue with the display of a website (found here). The elements inside the div with the class name of .index_container are not appearing correctly in Firefox. Despite being present, they remain invisible. I've attempted to resolve th ...

htmlcssfirefoxsass

Unable to modify the width of textarea

I've been struggling to adjust the width of a textarea element, as neither setting rows and cols in HTML nor using CSS has worked for me. The height adjustment was successful with HTML. Any tips on changing the width? form, label { position: rel ...

htmlcssformstextareawidth

Dynamic mouse path

Currently, I am in the process of creating a mouse trail similar to what is found on this particular website. I have been using JavaScript, jQuery, and various libraries in my attempt to achieve this effect; however, it has proven to be more challenging th ...

javascriptjqueryhtmlcss

How can I correctly embed a PHP variable within an HTML document?

How can I properly include the variable $var from the file.php: <?php $var = 5; ?> and use it in this php file with embedded html code: <?php include "file.php" ?> <!doctype html> <html lang="en"> <head&g ...

phphtml

Align objects in two columns with varying heights properly

I'm trying to arrange items in two columns like Wallapop, but this is the best I've come up with so far: https://i.sstatic.net/1yBqJ.png Here is a JSFiddle link where you can edit the code: https://jsfiddle.net/52qdnLcg/ .parent { backgrou ...

htmlcssalignmentheight

Execute a function in wxHtmlWindow after the page has finished loading

I'm currently facing an issue with wxPython that I could use some help with. My goal is to create a basic HTML window with forward and backwards navigation buttons. However, I'm encountering difficulties when users click on links within the page. ...

pythonhtmlwxpythonwxhtmlwindow

Tips for aligning text vertically within a definition list

I am working on a definition list where I need to vertically center the text within each dd element. dl, dt, dd { margin:0; } dt { background: blue; } dd { min-height: 100px; background: gold; border-bottom: 3px solid white; } <dl ...

htmlcss

I need to adjust the alignment of the text within my list item that includes a time element

I am struggling with aligning my elements vertically downward as the text following the "-" appears disorganized. I attempted to enclose the time tags within div elements and align them so that they evenly occupy space, but this approach did not work. Ins ...

htmlcss

Preventing attribute or tag cloning in Jquery: What you need to know

I'm having some trouble with JQuery. I want to clone an attribute or tag that is dragged from one div1 to another div2, which is working fine. But the issue arises when I drag or move the position of an existing tag on div2, then the cloning process s ...

javascriptjqueryhtmlcss

Could it be an issue with the recording of Flutter HTML responses? Perhaps it has something to do with variable types

So, here's a head-scratcher... I've got the server response in hand, but it seems like different parts of my code just aren't cooperating when it comes to sharing that information. void setNumber(String password) async { info = await getH ...

htmllistflutter

Choosing the right framework for implementing push notifications can be a critical decision. Should

I am currently working on a Java application that requires the server to send push notifications to the client every one second. To achieve this, I am using HTML5 server-sent events for one-way communication from the server to the client. However, my conce ...

javascripthtmlnode.jspush-notificationvert.x

In order for Firefox to properly recognize and apply the @font_face, it must be located in the root

I'm working on a website that has a custom font, and I've implemented the @font-face code as shown below: @font-face { font-family: 'webfontregular'; src: url('fonts/cracked-webfont.eot'); src: url('fonts/cra ...

htmlfirefoxcssfont-face

In need of assistance with filtering lists using JQuery

Hi there! I'm looking to modify a list filtering function by targeting multiple ul tags within the same div instead of just filtering li elements. Any ideas on how this can be achieved? Below is my JavaScript code: $( document ).ready(function() { ...

javascriptjqueryhtml

By employing timeUpdate in conjunction with currentTime

I am looking to utilize the timeUpdate and currentTime functionalities to display or hide a div at a specific time during video playback. I have been able to make it work, but it seems to be showing and hiding every second I specify. Below is the code I ...

javascripthtmlcss