Height Animation and Divs Placement

Question

Height Animation and Divs Placement

My approach is as follows:

Upon clicking an image (refer to the screenshot provided), I intend for text related to that specific image to be displayed beneath the row of images (circles). To achieve this, I experimented with using transitions. Initially, I created a parent div (colored green) with its position set to relative, and a child div (colored red) with its position set to absolute. I then animated the top property of the child div, resulting in the desired effect.

.parent { position: relative; }
.child { position: absolute; top: -100px; transition: top 1s linear; }
.child:target { top: 0; }

However, I encountered an issue when attempting to have additional divs below the sliding text content (the 'test' text in the demonstration) push down as the text expanded. This limitation arises from the fact that when a child div's position is set to absolute, the height of the parent div (green box) does not automatically adjust accordingly.

Therefore, my question stands: Is there a method to resolve this challenge?

Thank you for sharing your insights.

PS: As shown in the screenshot, the green box's height exceeds that of the red box due to another invisible red div positioned below the visible one, but obscured by having opacity set to 0.

html css

Answer 1

Answer №1

There are various methods to achieve this.

One approach I used involves CSS3 with height and absolute positioning. By utilizing height without any positional issues, the layout can flow smoothly. However, a drawback of using heights is the necessity of providing a fixed height for CSS transitions to function properly. To circumvent this limitation, an additional wrapper around the div can be employed to expand and utilize its height for the expanding div as shown below. Disregard the row and columns classes.

HTML

<div class="small-12 columns  level-1">
    <div class="row category-name ">
        <div class="small-12 columns">
            <span class="">Click to expand or collapse</span>
        </div>
    </div>

    <div class="level-2 level-2-container" style="height: 60px;">
        <div class="grow-wrapper small-12 columns">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
        </div>
    </div>
</div>

CSS

.level-2-container {
    -moz-transition: height 0.5s;
    -ms-transition: height 0.5s;
    -o-transition: height 0.5s;
    -webkit-transition: height 0.5s;
    transition: height 0.5s;
    overflow: hidden;
    /* outline: 1px solid red; */
    padding: 0;
    overflow:hidden;
}

JavaScript

$(document).on('click', '.level-1', function(event) {
    var $level1 = $(event.currentTarget);
    var $level2 = $level1.find('.level-2-container');
    var $growWrapper = $level1.find('.grow-wrapper');
    var heightToSet = $growWrapper.height();

    growDiv = $level2[0];
    if (growDiv.clientHeight) {
        $level2.height(growDiv.clientHeight);
        $level2.height(0);
    } else {
        growDiv.style.height = heightToSet + "px";
    }

    event.stopPropagation();
});

JS-Fiddle http://jsfiddle.net/hps8p/

Answer 2

There are various methods to achieve this.

One approach I used involves CSS3 with height and absolute positioning. By utilizing height without any positional issues, the layout can flow smoothly. However, a drawback of using heights is the necessity of providing a fixed height for CSS transitions to function properly. To circumvent this limitation, an additional wrapper around the div can be employed to expand and utilize its height for the expanding div as shown below. Disregard the row and columns classes.

HTML

<div class="small-12 columns  level-1">
    <div class="row category-name ">
        <div class="small-12 columns">
            <span class="">Click to expand or collapse</span>
        </div>
    </div>

    <div class="level-2 level-2-container" style="height: 60px;">
        <div class="grow-wrapper small-12 columns">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
        </div>
    </div>
</div>

CSS

.level-2-container {
    -moz-transition: height 0.5s;
    -ms-transition: height 0.5s;
    -o-transition: height 0.5s;
    -webkit-transition: height 0.5s;
    transition: height 0.5s;
    overflow: hidden;
    /* outline: 1px solid red; */
    padding: 0;
    overflow:hidden;
}

JavaScript

$(document).on('click', '.level-1', function(event) {
    var $level1 = $(event.currentTarget);
    var $level2 = $level1.find('.level-2-container');
    var $growWrapper = $level1.find('.grow-wrapper');
    var heightToSet = $growWrapper.height();

    growDiv = $level2[0];
    if (growDiv.clientHeight) {
        $level2.height(growDiv.clientHeight);
        $level2.height(0);
    } else {
        growDiv.style.height = heightToSet + "px";
    }

    event.stopPropagation();
});

JS-Fiddle http://jsfiddle.net/hps8p/

Answer 3

Answer №2

After realizing the complexity of the original query, it became clear that a mouseover was necessary to trigger text display beneath an image. Each image corresponds to a specific block of text (indicated by red boxes). The goal is to have all text boxes hidden by default and only appear when the user hovers over the associated image, with a smooth animation effect. Additionally, the surrounding divs should adjust accordingly.

Following Vishwanath's insightful advice, it was determined that the text blocks needed to be nested within another container for better organization. A JavaScript function calculates the height of the text block connected to the hovered image (identified by its id), adjusting the parent div box size accordingly through CSS3 transitions. Upon mouseout, the parent div resets to zero height, moving the text out of sight.

This is the modified solution:

.bio_container
{
    display: inline-block;
    position: relative;
    border: 2px solid green;
    width: 100%;
    transition: height 1s ease-in-out;
    overflow: hidden;
}

.bio
{
    position: absolute;
    top: -200px;
    transition: top 1s ease-in-out, opacity 0.5s ease-in-out;
    border: 1px none green;
    z-index: 0;
    opacity: 0;
    border: 1px solid red;
}

Answer 4

After realizing the complexity of the original query, it became clear that a mouseover was necessary to trigger text display beneath an image. Each image corresponds to a specific block of text (indicated by red boxes). The goal is to have all text boxes hidden by default and only appear when the user hovers over the associated image, with a smooth animation effect. Additionally, the surrounding divs should adjust accordingly.

Following Vishwanath's insightful advice, it was determined that the text blocks needed to be nested within another container for better organization. A JavaScript function calculates the height of the text block connected to the hovered image (identified by its id), adjusting the parent div box size accordingly through CSS3 transitions. Upon mouseout, the parent div resets to zero height, moving the text out of sight.

This is the modified solution:

.bio_container
{
    display: inline-block;
    position: relative;
    border: 2px solid green;
    width: 100%;
    transition: height 1s ease-in-out;
    overflow: hidden;
}

.bio
{
    position: absolute;
    top: -200px;
    transition: top 1s ease-in-out, opacity 0.5s ease-in-out;
    border: 1px none green;
    z-index: 0;
    opacity: 0;
    border: 1px solid red;
}

Height Animation and Divs Placement

Answer №1

Answer №2

Similar questions

Enhancing the Bootstrap carousel slider with offset background content container

Exploring how to retrieve time using PHP and JavaScript

Displaying an HTML button above JavaScript code

Iterating through elements within a Div will retrieve the initial element exclusively

Web fonts are functioning properly only on Chrome and Safari for Macintosh operating systems

"Form submission fails to populate _POST when file and text fields are used simultaneously

Use JavaScript to create a new window and load the HTML content from an external URL

Which is better: Utilizing Ajax page echo or background Ajax/direct HTML manipulation?

I am attempting to add user input to the parent container when the button is clicked, but for some reason it is

The Push Over Menu is malfunctioning and not functioning properly

Content in Bootstrap not filling entire mobile screen

How can I display different divs based on a selected option?

The labels in production are getting cut off when creating a view in ASP .NET MVC

CSS: Card elevates when keyboard is activated on a mobile device

Loading JS and CSS files in relation to the website root directory

Changes made to the CSS are not being reflected on the live production server hosted on our Bitbucket repository

Transferring a unique Python object back and forth between Jinja2 and Flask

Is it possible to customize the appearance of a toast notification using Toastr beyond the default settings? If so, what options are available for creating

What is the best way to trigger a modal on Bootstrap using a JavaScript/jQuery function?

Adding a background image in javascript using data from a MySQL database