"Instant Elementor offers seamless CSS transitions for an enhanced user experience

UPDATE: Issue resolved, discovered that Elementor was overriding certain styles. Please refer to my solution below.

I'm attempting to add animation to a simple max-height property of a div, but the transition isn't working as expected. It transitions abruptly. I am trying to imitate this tutorial from w3schools: https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_collapsible_animate

This is the JavaScript code I am using to modify the max-height on button click:

<script>
    var coll = document.getElementsByClassName("section_button");
    
    var i;
    for (i = 0; i < coll.length; i++) {
      coll[i].addEventListener("click", function() {
        
        var content = this.nextElementSibling;
        if (content.style.maxHeight){
          content.style.maxHeight = null;
        } else {
          content.style.maxHeight = content.scrollHeight + "px";
        }
      });
    }
</script>

Below is my CSS for reference:

.section_content {
  max-height: 0;
  overflow: hidden;
  -webkit-transition: all 2s ease;
  -moz-transition: all 2s ease;
  -ms-transition: all 2s ease;
  -o-transition: all 2s ease;
  transition: all 2s ease;
}

The hiding of the div is functional, however, the animation is not working, in contrast to the smooth animation displayed in the w3schools example on my Safari browser. I also tried Chrome with no luck.

Additional information about my setup:

  • Browser: Safari 14 (Same issue in Chrome)
  • Using Wordpress with Elementor for page construction
  • Utilizing Code Snippets plugin for JS injection

I've tested various solutions found online without success. There may be an obvious mistake that I am currently overlooking, so any assistance would be greatly appreciated!

Answer №1

The complete code for checking is not provided. However, I have included your code and made some modifications. Please review the changes to see if it resolves your issue.

    var buttons = document.querySelectorAll(".section_button");
    
    buttons.forEach(function(button) {
      button.addEventListener("click", function() {
        
        var content = this.nextElementSibling;
        if (content.style.maxHeight){
          content.style.maxHeight = null;
        } else {
          content.style.maxHeight = content.scrollHeight + "px";
        }
      });
    }
.section_content {
  max-height: 0;
  overflow: hidden;
  -webkit-transition: all 2s ease;
  -moz-transition: all 2s ease;
  -ms-transition: all 2s ease;
  -o-transition: all 2s ease;
  transition: all 2s ease;
}

.content {
  padding: 0 18px;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
  background-color: #f1f1f1;
}
<button class="section_button">Open Collapsible</button>
<div class="content">
  <p>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.</p>
</div>

Answer №2

It turns out that Elementor ended up overriding the transform property 🤦‍♂️. To solve this, I decided to utilize !important in order to enforce my own style over Elementor's:

.section_content {
  max-height: 0;
  overflow: hidden;
  -webkit-transition: all 0.5s ease !important;
  -moz-transition: all 0.5s ease !important;
  -ms-transition: all 0.5s ease !important;
  -o-transition: all 0.5s ease !important;
  transition: all 0.5s ease !important;
}

I definitely need to make better use of the inspector tool moving forward 😅

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

The placement of my footer is off and not aligned with the bottom of the page

I am struggling to make my footer align with the bottom of the page rather than sticking to the bottom of the browser window and moving along with the scroll. How can I fix this issue? The goal is to have the footer remain out of sight at the bottom of th ...

Utilizing jQuery to add elements to a webpage

I need to populate an empty div on my webpage using jQuery. Here's an example: <div class="content"> </div> After the first insertion, I want the markup to look like this: <div class="content"> <div class="inserted first"& ...

Prevent Sending Blank Forms with Stripe js

Currently, I am working on a solution to prevent users from submitting the stripe form when certain inputs are left empty. To achieve this, I have integrated stripe.js elements into my form and implemented the form submission handling within my vue compone ...

Tips for effectively utilizing the jQuery closest method

This webpage allows me to upload images to a database and then display them again. When uploading an image, a comment can be added to it using a textarea. When the images are displayed again, the comments are shown and editable as well. Recently, I added a ...

What other options exist for searching objects of functions?

Can you suggest some good, easy-to-read, scalable, and efficient alternatives for this basic pattern? type Figure = { kind: "square", sideLength: number } | { kind: "rectangle", length: number, width: number } | { kind: "circle", radius: numbe ...

What is the best way to adjust the size of a <div> element when its content <span

I'm currently dealing with a div that has a max-width of 200px. Inside this div, there are some spans with the properties white-space: nowrap and display: inline-block. .a { max-width:200px; } .b { display: inline-block; white-space:nowrap; } ...

Error: The identifier has already been declared and cannot be re-declared

I am attempting to create a modal-cookie feature that will display a modal on page load if a cookie named "name" does not exist. However, I encountered an error: Uncaught SyntaxError: Identifier 'addCookie' has already been declared. This erro ...

React fullpage.js causing z-index stacking problems

Take a look at the demo here: I'm having trouble getting the 'more info' modal to display above all other elements on the screen. Here's the desired stacking order, with the highest stacked element listed first: modal nav open header ...

What is the best way to determine the reason for a npm dependency being installed?

Looks like this question may have been asked before, but I haven't been able to locate the answer in my search. I recall that NPM offers a command such as npm why module-name Or npm explain module-name This command helps you understand why a par ...

How to place a scrollable content below a fixed flexbox navigation menu

I am struggling with a certain snippet (best viewed in full screen mode) where I need to position the <main> element directly underneath the <header> element. The <header> is set in a fixed position to remain at the top of the screen whil ...

What is the best way to display data retrieved from a GET request in Angular?

Spending too much time on a development issue is causing me frustration. After extensive research, I find myself stuck at this point. The problem lies in making a GET request from a service which is called by a controller. Below is the code for the servi ...

The HTML code displays the changes in output after resizing the screen

Currently, I am utilizing canvas(graph) within my Angular JS UI5 application. My main goal is to increase the width of the graph. However, whenever I attempt to adjust the size of the Graph, it remains unchanged. Interestingly, when I shrink the screen, th ...

Diverse positioning across various browsers

I have a navigation menu with alternating divs - one containing a menu link and the other a 'menu separator' div with a 2px wide 'separator bar' image. The width of the separator divs is set to 24px to create proper separations. For so ...

Creating a div with a fixed size in Tailwind CSS: A beginner's guide

I received some initial code from a tutorial and I've been having trouble setting the correct size. Despite searching through documentation for solutions, it seems like there's a fundamental aspect that I'm overlooking. The main issue is tha ...

Ways to emphasize the current tab on the site's navigation bar?

Here's my question: I have a menu with different items, and I want to make sure that the active tab is highlighted when users switch to another page. I noticed that Stack Overflow uses the following CSS: .nav { float: left; font-size: 1 ...

How can I send parameters to an HTML file using Node.js?

In my current code res.sendfile('./home.html',{user:req.user}), I need to figure out a way to access the user parameter directly in the HTML file without relying on a template engine. Can anyone suggest how this can be achieved? ...

Hide or show list items in an unordered list using jQuery

I am interested in creating a script that can toggle between "show more" and "show less" functionality for elements in a list. I came across this script: HTML <ul id="myList"> <li>One</li> <li>Two</li> <li> ...

What is the process for encrypting and decrypting image files over the internet?

I'm currently developing a web application that requires loading images into a canvas object, followed by extensive manipulation. My goal is to conceal the original source image file (a jpeg) in such a way that users on the client side cannot access i ...

Guide to implementing the collapsible start and stop button feature in Angular

Having an issue in my Angular application with the dashboard page. I've created a button for start or stop (toggle functionality) but it's not working as expected. .component.ts toggleCollapse(jammer) { this.jammer.isCollapsed ? 'START& ...

Convert lengthy URLs in PHP into multiple lines

I need to display a lengthy string within a cell in a table, but the URL is too long. How can I convert something like this: /vlive.qqvideo.tc.qq.com/u0020mkrnds.p1203.1.mp4?vkey=7AB139BF6B32F537 47E8FF192E6FE557B3A3D644C034E34BF6EAEB4E0774F2A92EF3AC5C0075 ...