Switching the class does not initiate the transition

Question

Switching the class does not initiate the transition

I'm having trouble getting a transition to work when toggling a class. The class is being applied and the style changes accordingly, but the transition isn't triggering. I've checked that the transition applies to all properties, so I don't think that's the issue.

function expandFunction(element) {
  element.classList.toggle("setHeightStyle");
}

.setHeightStyle {
  height: 60px;
}

#expSect1 {
  overflow: hidden;
  cursor: pointer;
  transition: 1s;
}

<div class="setHeightStyle" id="expSect1" onclick="expandFunction(this)">
  <h1>Title</h1>
  <br>
  <p>Content!<br>More content!</p>
</div>

javascript html css

Answer 1

Answer №1

It is essential to correct not only the commas in the HTML code.

When using the transition, be sure to specify the property it will affect... If unsure, you can use all.

In order for the transition to work properly, the height must be defined within the #expSect1 rule... As transitions require a numerical value to begin with - using auto won't suffice.

Additionally, an id has higher specificity than a class... Meaning you should include both the class and the id in the rule that needs to be toggled.

Please refer to the functional example below.

function expandFunction(elementID) {
  let element = document.getElementById(elementID);
  element.classList.toggle("setHeightStyle");
}

#expSect1.setHeightStyle {
  height: 60px;
}

#expSect1 {
  overflow: hidden;
  cursor: pointer;
  height: 200px;
  transition: all 1s;
  background: blue;
}

<div class="setHeightStyle" id="expSect1" onclick="expandFunction(id)">
  <h1>Title</h1>
  <br>
  <p>Content!<br>More content!</p>
</div>

Answer 2

It is essential to correct not only the commas in the HTML code.

When using the transition, be sure to specify the property it will affect... If unsure, you can use all.

In order for the transition to work properly, the height must be defined within the #expSect1 rule... As transitions require a numerical value to begin with - using auto won't suffice.

Additionally, an id has higher specificity than a class... Meaning you should include both the class and the id in the rule that needs to be toggled.

Please refer to the functional example below.

function expandFunction(elementID) {
  let element = document.getElementById(elementID);
  element.classList.toggle("setHeightStyle");
}

#expSect1.setHeightStyle {
  height: 60px;
}

#expSect1 {
  overflow: hidden;
  cursor: pointer;
  height: 200px;
  transition: all 1s;
  background: blue;
}

<div class="setHeightStyle" id="expSect1" onclick="expandFunction(id)">
  <h1>Title</h1>
  <br>
  <p>Content!<br>More content!</p>
</div>

Answer 3

Answer №2

The issue lies in the fact that the height is not initially set on the element. To address this, I needed to adjust the selector for the added class in the HTML due to the specificity of your ID selector. It's generally recommended not to use IDs for styling purposes; they should be reserved for JavaScript functionality.

function toggleHeight(element) {
  element.classList.toggle("setHeightStyle");
}

#expSect1 {
  height: 200px;
  overflow: hidden;
  cursor: pointer;
  transition: all 1s;
}

#expSect1.setHeightStyle {
  height: 60px;
}

<div class="setHeightStyle" id="expSect1" onclick="toggleHeight(this)">
  <h1>Title</h1>
  <br>
  <p>Content!<br>More content!</p>
</div>

Answer 4

The issue lies in the fact that the height is not initially set on the element. To address this, I needed to adjust the selector for the added class in the HTML due to the specificity of your ID selector. It's generally recommended not to use IDs for styling purposes; they should be reserved for JavaScript functionality.

function toggleHeight(element) {
  element.classList.toggle("setHeightStyle");
}

#expSect1 {
  height: 200px;
  overflow: hidden;
  cursor: pointer;
  transition: all 1s;
}

#expSect1.setHeightStyle {
  height: 60px;
}

<div class="setHeightStyle" id="expSect1" onclick="toggleHeight(this)">
  <h1>Title</h1>
  <br>
  <p>Content!<br>More content!</p>
</div>

Switching the class does not initiate the transition

Answer №1

Answer №2

Similar questions

Avoiding the use of apostrophes in jQuery or JavaScript

Can Jest Vue handle loading dynamic imports for snapshot testing?

Triggering Actions with SVG Paths

Is there a way to retrieve two arrays in an Ajax request?

What is the best way to utilize a single npm module in multiple TypeScript files?

Efficient management of jQuery variables

Vertically align elements within a bootstrap "card-body" with a fixed height inside a "card text-center" container

There is a hidden delete button obscured by another element. What steps can be taken to bring that element to the forefront and make it visible?

Transmitting data from the front end to the server in React/Shopify for updating API information using a PUT request

Consistently maintaining a uniform distance between icons and the border box is essential

What steps do I need to take in order to create a histogram with perfect symmetry?

I am seeking assistance with incorporating mySQL into my Node.js project with React

Creating Chaos in PrimeFaces Page Navigation with JavaScript

Tips for adjusting the alignment of numbers in an ordered list to the right

The issue arises with Phonegap/Cordova socket plugins resulting in an error message: "undefined is not a function in cordova.js"

Modifying the app.css file in the source tab of dev tools does not cause any changes in the DOM when working with a

JSON payload with an array that includes nested JSON objects

How can Vuetify be used to create a v-row that floats above other elements, maintains a fixed position, and still adheres to the width of its parent element

Employing PHP to iterate through and separate items into disparate divs

Direct your cursor to move across the sphere surface in THREE.JS