What are some strategies for creating a smooth transition with a max-height of 0 for a single-line div?

I have a div that is one "line" in height. When a button is clicked, I want it to disappear and simultaneously another div with more lines should appear. I have managed to make this work, but no matter what I do, the one-line div disappears very quickly almost as if there is no transition at all. However, for the multiline div, it works perfectly.

My question is how can I achieve a smooth transition for the one-line div so that it doesn't just disappear abruptly? I need it to vanish slowly while also vacating its place, which is why I initially used the max-height method.

HTML code:

<div id="Simple" class="Hide Show">
    <div>1. simple</div>
</div>
<input type="Button" OnClick=" $('#Simple').removeClass('Show');$('#Advanced').addClass('Show');" value="Switch" />
<div id="Advanced" class="Hide">
    <div>1. advanced</div>
    <div>2. advanced</div>
    <div>3. advanced</div>
    <div>4. advanced</div>
</div>

CSS classes:

.Hide {
    max-height: 0;
    transition: max-height 0.2s ease;
    overflow: hidden;
}

.Show {
    max-height: 500px;
    transition: max-height 0.7s ease-in;
}

Link to a fiddle containing the code: https://jsfiddle.net/7u12yvm0/

Additional information: I am using Internet Explorer (it should be compatible with IE11).

Answer №1

Follow these steps:

transition: max-height 0.7s ease;

then

<input type="Button" OnClick=" $('#Simple').hide('slow').removeClass('Show');$('#Advanced').addClass('Show');" value="Switch" />

Take a look at this link

Answer №2

Consider using jQuery fadeOut method

$('#Simple').fadeOut('slow');
$('#Advanced').addClass('Show');

Answer №3

Check out this Fiddle

You've set a very large max-height, causing all of it to be animated whenever the button is clicked. This lengthy animation delay is due to the excessive height.

Consider using max-height: 20px; for a more suitable height that fits one line of text.

To adjust the duration of your transition, simply tweak the timer until you achieve the desired length.

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

Updating Google+ url parameter dynamically without the need to reload the page

Is there a way for a user to share a link on social media platforms like Facebook and Google+ without having to refresh the page? The user can customize the link with an ajax call, ensuring that the page remains static. Here is my code for the Google Plu ...

Jquery functionality fails to work once new content is dynamically loaded through AJAX

This particular JQuery script functions properly under normal circumstances when the web page is opened. However, it does not work as intended within the AJAX response results. <script> $(".box").each(function(){ var value = parseInt($(this).data ...

Tips for calculating the total of each row and column in a table with jQuery

<table id="repair-invoice"> <tr> <th>Item</th> <th>Parts</th> <th>Labor</th> <th>Total</th> </tr> <tr> <td>Oil Change</td&g ...

Place the <span> element at the bottom of the <ul> list

Struggling to align the captions of an image carousel at the bottom of the <ul>. No matter what I try, it just doesn't look right. Check out my Fiddle here Below is the HTML structure: <div class="carousel"> <ul> <l ...

The functionality of JQuery fails to work properly when receiving an AJAX response

I have separated my code into three main sections: a PHP file, a jQuery section with an AJAX function that requests data, another PHP file. The response from the AJAX request is HTML that needs to be added at the beginning of a specific DIV inside the i ...

What could be causing the unexpected behavior of nth-child?

I'm trying to position an image with the class photo, but unfortunately, the nth-child selector is not having any effect on that particular element. I have searched for various solutions, but none seem to be working! .container { height: 100vh; ...

The CSS grid-template-areas feature is not performing as anticipated

.content { width: 600px; height: 600px; border: 4px solid lime; display: grid; grid-template-areas: 'a d' 'b d' 'c d'; } textarea, iframe { margin: 0; box-sizing: border-box; } .content > .a {gri ...

What is the best way to utilize a variable in jQuery outside of a function?

I am attempting to utilize the .index method to determine the position of the image that is clicked on. I then need to use that number in another variable which must be external to the function. var index; $('.product img').click(function () ...

Guide to transferring input text value to checkbox value using jQuery

Explore Table <table> <thead> <tr> <th class="text-center"><input type="checkbox" checked="checked" class="checkAll" name="checkAll" /></th> <th>#</th> <th>Recipient Name ...

CSS Navigation Bar Fails to Function Properly on Mobile Devices

Check out the plunkr I have created by visiting: http://plnkr.co/edit/gqtFoQ4x2ONnn1BfRmI9?p=preview The menu on this plunkr functions correctly on a desktop or laptop, but it doesn't display properly on a mobile device. I suspect that the issue may ...

What is the process for sending dynamic emails in Business Catalyst?

I'm currently using Adobe Business Catalyst for my project. I've set up a web form with several fields, including three dynamic fields from "Web Apps." One of the fields is called "Select Location." Each location has an associated email address ...

Having trouble getting a jQuery variable to work as an argument in an onclick function for an HTML

success: function(jsonresponse) { data = JSON.stringify(jsonresponse); $.each(JSON.parse(data), function (index, item) { var Id=item.id; var JobId=item.JobId; var eachrow = "<tr>" + "<td>" + item.id + "</td>" ...

Is it possible to load a Google Chart in an asynchronous manner?

Here is my code for loading a Google Chart: function drawChart1() { var jsonData1 = $.ajax({ url: "library/json_netsales.php", dataType:"json", async: false }).responseText; // Create our data table using JSON data ...

What is the process of adding background color to text?

Is there a more efficient way to style this text without relying on the span tag? I am looking to add a background color to my text. Code: .subject { color: gold; background: gray; } <h2>Some Subjects</h2> <ol> <li style="bac ...

What benefits does React offer that jQuery does not already provide?

What sets ReactJS apart from jQuery? If jQuery can already handle everything, why should we use React? I've tried to research on Google but still don't have a clear answer. Most explanations focus on terms like "views," "components," and "state" ...

Preselecting items in PrimeNG Checkbox: A step-by-step guide

How can I ensure that the already selected item is displayed upon loading this div? The code in `rp` consists of an array of type Permission with one element, which should be automatically selected. What could be causing the issue? Here is the HTML snippe ...

Suggestions for resolving the issue of my header being truncated on mobile browsers?

I am facing an issue with my header and need assistance in fixing it. The problem occurs when scrolling down, as it cuts off a part of the header, but returns to normal when scrolling back up. I suspect the hamburger menu might be causing this issue becaus ...

The script is malfunctioning on Google Chrome

Below is a script that I have: EXAMPLE : <script> var ul = document.getElementById("foo2"); var items = ul.getElementsByTagName("li"); for (var i = 0; i < items.length; i=i+2) { // perform an action on items[i], which repr ...

Effortlessly glide to the form and center your attention on the textarea

Upon clicking the link, I aim to accomplish three tasks: Implement smooth scrolling down to #form Automatically focus on the textarea for immediate message writing Add extra top margin to account for a fixed top bar on the website. <a class="link" ...

Add HTML to a div element using jQuery when content is replicated through JavaScript

I have encountered an issue while appending HTML from a dynamically created div using JavaScript. The problem arises when I try to append the HTML multiple times - each time it adds the content twice, thrice, and so on. This is possibly happening because i ...