JQuery and CSS: creating a seamless transition in wrapping-DIV height

I currently have multiple DIVs nested within a wrapper-DIV

<div id="wrapper">
    <div id="inner_1"></div>
    <div id="inner_2"></div>
    <div id="inner_3"></div>
</div>

Each inner-DIV has its own unique height. When I use fadeIn/fadeOut() to show/hide the inner DIVs, the height of the wrapper changes abruptly from small (inner_1) to large (inner_2) in order to accommodate the displayed inner-DIVs.

Is there an easy way to animate the height of the wrapper-DIV so that it smoothly adjusts to fit the height of the inner-DIV?

For reference, here is a link to an example: https://jsfiddle.net/a3wvxcuq/#

jquerycsshtml

Answer №1

Easily adjust the dimensions of your divs by passing a number in milliseconds to the .show() and .hide() methods for smooth transitions.

Check out the demo here

This is just a starting point to guide you in the right direction.

Let the code be your canvas and unleash your inner artist ;)

Alternatively, for a more visually appealing effect: See Demo 2

And the award goes to this impressive demonstration: Experience Demo 3

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

AJAX request encountering a blockage

Having created a C# AJAX system with a reporting feature, I encountered a challenge where the more intricate reports took approximately 30 seconds to generate. To address this issue, I incorporated a parallel AJAX call to monitor the progress of the report ...

c#ajaxjquery.net-4.0iis-6

Transforming jQuery script into AngularJS

I am currently working on a project with the Ionic framework that utilizes AngularJS. I am wondering if it is possible to rewrite the following code from jQuery to AngularJS? jQuery(function($) { var states = { 'USA': ['Arizona ...

javascriptjqueryangularjs

Using JQuery to implement a click event for a current toggle functionality

Is there a way to automatically close this drawer when the canvas is clicked? I don't want clicking on the open drawer itself to close it, as that's not what I intended. Any assistance would be greatly appreciated. Thank you! $(function(){ $ ...

jquery

What is the best way to retrieve a value from a table using jQuery?

I'm currently working on setting up a hidden table within an ASP webpage that I plan to access using jQuery to retrieve values. Essentially, I have an ID that I need to compare against the hidden table and then extract the value located 3 columns next ...

jquery

Exploring the div's classes using SCSS

I recently started learning SCSS. I apologize if this question has been asked before, but I couldn't find the exact solution I was looking for. In one of my .erb views, classes are dynamically assigned to a specific div. Here's an example: < ...

csssass

The div's innerHTML is consistently cleared after a php page loads, even though it loads successfully

When using jQuery, I am loading a div dynamically $('#Detailvolunteer').load("http://localhost/../somepage.php") After the content is loaded, the div appears to be empty even though it has been loaded successfully. The innerHTML value shows not ...

phpjqueryajax

Doesn't IE support the use of jQuery.last()?

Here is the code snippet I am currently using: $('script').last().parent().html('kkkk') Unfortunately, I am encountering an error in Internet Explorer when running this code. Any suggestions on how to address this issue would be great ...

jqueryhtmlinternet-explorer

Once the ajax jQuery is triggered, I hope to see an image loading for a brief moment of just 1

Can someone assist me with the following code snippet? <script type="text/javascript"> $(function () { $(".a").live("click", function () { var $this = $(this), ProductImageId = $this.data('ProductImageId'); ...

javascriptjqueryhtmlcssajax

Strange formatting in the internet explorer browser (IE)

I have encountered an issue with CSS animation elements on the home page. The animations appear correctly in Google Chrome, but there is a strange indentation problem when viewed in IE. I have tried several solutions without success. Although I am not a w ...

htmlcssinternet-explorer

Configure the Breeze JS ajax adapter to transmit query string parameters in lieu of headers

Is it feasible to configure the Breeze JS ajax adapter to include additional query string parameters? Currently, I am utilizing custom header parameters, but I would like to switch to using query string parameters in our application. Current code: fu ...

ajaxjqueryhttp-headersquery-stringbreeze

One div's content is merging with another div

<main> <!-- Carosel--> <div> <div class="carousel"> <button class="carousel__button carousel__button--left is-hidden"> <img src="Image/left-arrow-svgrepo ...

htmlcss

The jQuery selector seems to be ignoring elements within a different scope

I'm attempting to perform an ajax request to a specific page on my website using this particular element as a direct child of the body tag: <div class="container" id="wantme"><div class="content"></div></div> There is only on ...

javascriptjqueryhtmldom

Disconnect the parent when the child is clicked in CSS

I am struggling to find a solution for this issue. Currently, I have a hover effect where when I click on a submenu li item, the parent li also gets highlighted. You can see the behavior in the image below: https://i.sstatic.net/Ie6Lb.png Is there any w ...

jquerycss

Using XSLT with JavaScript

I am currently working with a set of XML files that are linked to XSLT files for rendering as HTML on a web browser. Some of these XML files contain links that would typically trigger an AJAX call to fetch HTML and insert it into a specific DIV element on ...

javascripthtmlxmlajaxxslt

Issue: Unsightly blank space appearing at the top of my website. Struggling to determine the cause

I am experiencing an issue on my blog. In Firefox, there is a noticeable gap at the top of the site that is not present in Chrome, and I can't seem to fix it. Even Firebug didn't provide any solutions. It's strange: when I adjust the margi ...

htmlcss

Which is better for implementing pagination: PHP/MySQL or jQuery?

Hey, I have a question for you. When it comes to implementing Pagination on my website, should I go for jQuery or stick with a basic PHP/MySQL solution that loads a new page? If I opt for jQuery and I have a significant number of results, let's say o ...

phpjquerymysqlajaxpagination

responding to a forum comment in jquery by either replying or quoting

I'm attempting to develop a forum "quote" feature, similar to reply options on many forums. However, I am struggling with selecting the appropriate items from my comment and dealing with dynamically generated IDs. Here is the HTML of my comment: & ...

javascriptjqueryhtml

Is there a way to store a class property as a variable using PostCSS?

Looking to store a dynamic property in a variable for use with calc(). There is a class with a height that changes dynamically. .cuerpo-detalle { height: x; } The goal is to create a variable that captures the height property of the .cuerpodetalle cla ...

javascriptcsspostcsscssnext

Conquering Challenges Across Multiple Disciplines

Is there a solution to solving the cross domain issues that arise when trying to fetch data from a different web server on the client-side, in violation of the Same Origin policy? ...

phpjavascriptjqueryajax

Uploading SQL Files with the Help of jQuery and Ajax

I have encountered a rather trivial issue and cannot seem to find a suitable solution for it. It's quite basic, really. I am attempting to upload a file with a .sql extension through jQuery and AJAX using a Bootstrap modal in a WordPress plugin, but u ...

jqueryajaxwordpresspluginsjquery-file-upload