Transitioning CSS on the removal of a class

I'm attempting to implement a sliding effect on a div using CSS transitions, but it seems that the transition only works when closing the div.

HTML:

<div class="slider closed" id="more-details"> Some content </div>
    

CSS:

.slider {
      overflow-y: hidden;
      transition-property: all;
      transition-duration: .8s;
      transition-timing-function: cubic-bezier(0, 1, 0.2, 1);
    }

    .slider.closed {
      max-height: 0;
    }

    .slider.opened {
      max-height: 10000px;
    }
    

JS:

$('.read-more').on('click', function(e){
        e.preventDefault();

        $(this).toggle();

        $('#more-details').removeClass('closed').addClass('opened');

        $('#read-less').show();

     });

     $('.read-less').on('click', function(e){
        e.preventDefault();

        $('#more-details').addClass('closed').removeClass('opened');

        $('#read-more').toggle();
     });
    

Although the div opens and closes smoothly, the transition effect appears to be applied only during closing. Any suggestions on how to fix this?

Answer №1

It seems like you are employing a transition on max-height because the final height of your content is unknown, correct?

Animating from max-height: 0 to an enormous value is not feasible, but transitioning back is possible since the height is known.

In these situations, I typically follow this approach:

  • I enclose the content in a div with height: 0; and overflow: hidden;
  • Upon clicking, I use jQuery to calculate the exact height of the content div using $('selector').height();
  • Then, I utilize jQuery to assign this calculated height to the parent element of my content with $('wrapper').height(value);

The CSS transition style handles the animation seamlessly.

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

Plugin for controlling volume with a reverse slider functionality

I have been customizing the range slider plugin found at to work vertically instead of horizontally for a volume control. I have successfully arranged it to position the fill and handle in the correct reverse order. For instance, if the value is set to 7 ...

Select2 input field not receiving focus when navigating by tab key

When attempting to tab through the fields, I encounter an issue where the fields do not highlight as expected. Despite trying various solutions, such as the following CSS code: .select2-selection__rendered:focus { outline: none !important; box-shadow: ...

What is the technique to achieve a seamless blur effect?

Is there a way to create a smooth blur similar to a gradient transitioning from transparent to dark? .img { background: url(https://4kwallpapers.com/images/walls/thumbs_2t/13551.jpg); background-size: cover; background-position: center; width: 5 ...

Error encountered with a basic RESTful client powered by Jquery

I'm encountering an issue with a callback function in jQuery. Let's start from the beginning. The URL of my RESTful web service is: http://localhost:35055/new/webresources/generic/1 When accessed, it returns: {'name':'get&apo ...

Semantic UI (React): Transforming vertical menu into horizontal layout for mobile responsiveness

I have implemented a vertical menu using Semantic UI React. Here is the structure of my menu: <Grid> <Grid.Column mobile={16} tablet={5} computer={5}> <div className='ui secondary pointing menu vertical compact inherit&apos ...

Ways to display a tooltip on a listbox that can be moved

My ASPX page contains the following control: <asp:ListBox ID = "X" runat="Server" CssClass = "listbox"></asp:ListBox> I need to display a tooltip on each list item, as they are movable and their positions can be c ...

Bootstrap-datepicker retains the previous selection in its date picker popup

Upon clicking a button, certain text field values in a model are loaded before displaying the modal. Different dates are populated into the text fields based on which button is clicked. <button type="button" class="btn btn-warning btn-xs" id="editTeamB ...

Browsing through different backdrop visuals

I realize this question has been brought up numerous times before, but I urge you to take a moment and read through it. Currently, I am looking to add more interactivity to my HTML page. My goal is to change the background image every five seconds with a ...

The navigation bar is failing to display all of the titles

Having trouble with my HTML page. I can only see the first word of the title in the drop-down list. The navigation bar refuses to center despite trying various styles. Below is my CSS code: background-color: #78706e; height: 100%; font-family: Arial; c ...

Bootstrap-4 modal not appearing when activated within a dropdown menu

When I tried to use a dropdown feature in my application, I encountered an issue where one of the dropdown items was supposed to open a modal but it wasn't showing up. However, the modal worked perfectly fine when I accessed it using a normal button i ...

Utilizing jcrop and java to accurately crop images

I am attempting to utilize the JQuery Jcrop plugin along with Java in order to crop an image, but unfortunately, I am not achieving the desired outcome. JSP Code: <script type="text/javascript"> $(function () { $('#actualImage').Jcrop ...

Remove the presence of a black square when selecting elements using CSS

Update: After some investigation, I discovered that the mysterious black square is actually a part of the scroll bar. By adding the following code snippet: select::-webkit-scrollbar { display: none; } The square no longer appears. Initially, my se ...

Tap on the div nested within another div

Here is the scenario I am dealing with: <div id="main"> <div id="a"></div> <div id="b"></div> </div> On my website, element B is positioned below element A. How can I attach a click event only to those A elements t ...

Sort information based on the alphabetical order of words using AngularJS

I'm working with AngularJS and I'm looking to filter data alphabetically in AngularJS. Any assistance would be greatly appreciated! This is the code snippet I've been using: <script src="~/Scripts/angular.min.js"></script> < ...

Searching in jquery not functioning as intended

Greetings! I'm in the process of creating a live search feature similar to what's demonstrated at this link. However, I've encountered a minor issue with this snippet of code: jQuery("#result").on("click",function(e){ var $clicked = $(e.ta ...

Creating unique page styles using global styles in Next.js

I am facing a dilemma in my NextJS app. On the /home page, I need to hide the x and y overflow, while on the /books page, I want the user to be able to scroll freely. The issue is that Next only allows for one global stylesheet and using global CSS selec ...

Exporting data from a jQuery table to CSV format

I have customized the jQuery Table to CSV Plugin so that it triggers a browser download of a CSV file. The original function was: function popup(data) { var generator = window.open('', 'csv', 'height=400,width=600'); ge ...

Turbolinks 5 optimization for asynchronous data transfer using POST requests

In my Rails 5 / Turbolinks 5 project, I am looking to insert the HTML generated by a form submission into a specific div element. The form itself is a standard Rails form: = form_for(user) do |f| Upon successful submission of the form, a redirect is tri ...

Creating an HTML page with R Markdown: Placing an image in the upper right corner and adjusting the position of the title

Looking to add a company logo image to the top right corner of my R markdown report, and then shift the title down by 3 or 4 cm for a letterhead-like appearance. Does anyone have suggestions on how I can achieve this in my .Rmd file? Appreciate any assist ...

Modifying CSS to ensure compatibility with various browsers

I am curious if it is possible to modify some CSS when viewed in a different browser. For instance, I have this CSS for a flexbox div: .wdFlex { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit- ...