Add a transition or animation effect to the <details> element as it closes

I am experimenting with adding a transition effect to the details element when it opens and closes:

details
{
  height: 1em;
  transition: height 2s;
  border: 1px solid;
  overflow: hidden;
  white-space: pre;
}

details[open]
{
  height: 6em
}
<details>
  <summary>summary</summary>some
  hidden
  text
</details>

Currently, when the details open, it slowly expands to reveal the hidden text. However, when it closes, the text is instantly hidden and then slowly shrinks. I would prefer the text to be hidden by shrinking. Is there a way to achieve this using only CSS?

htmlcss

Answer №1

It seems like your luck has run out on this one.

Regrettably, there is currently no easy way to create animated transitions between open and closed states.

If having perfect animations is a priority for you, you will need to custom build your accordion using standard elements like <div>. Even with this approach, there are still limitations, such as the inability to smoothly animate between height: 0 and height: auto.

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

Adjust background image size to fit the screen, not just the content

Whenever I set the background image for each page using the following JavaScript code, var imageUrl = 'url(' + imageUrl + ') top left no-repeat fixed'; $('body').css({ 'background': imageUrl }); I also add ...

javascriptjqueryhtmlcssmobile

Transferring the selected option from a drop-down menu to a PHP page using an HTML form

I'm currently working on developing an HTML form that will send the user's question and the selected topic to a PHP page. The topics are retrieved from a MySQL database using PHP. My goal is to submit the chosen topic value from a dropdown menu, ...

phphtmlmysqlforms

Disable the dragging of a draggable div when another div is dropped inside

In my view, I have displayed reservations and tables as div elements. The tables are draggable and droppable, while the reservations are only draggable. My goal is to be able to drag a table to a desired position and then place a reservation on it. Once th ...

jqueryhtmljquery-uidrag-and-drop

In search of a CSS selector that can target elements based on specific text contained within them

Query: <div class="btn btn-second-in-pair-not-desired btn-tall">Clear search</div> <div class="btn btn-second-in-pair-not-desired btn-tall">Raw Search</div> <div class="btn btn-second-in-pair-not-desired btn-tall">Basic Searc ...

htmlcssseleniumselenium-webdriver

Enclose several lines of text within a border in the midst of other content

I'm looking to add a stylish border around multiple lines of text in a paragraph without having the border appear on each line individually. While I could enclose all the text in a div, it would separate the content from the rest of the paragraph. W ...

javascripthtmlcsscoding-style

Is there a way to produce random colors using this SCSS function?

The current function is returning an output in the color #ff0063, but my goal is to create a variety of colorful pixel dots on the screen. Could someone provide an explanation of what this code is doing? @function multiple-box-shadow ($n) { $value: &apos ...

htmljquerycsssass

Adjusting the height in AngularJS based on the number of items in a table

I've developed a straightforward AngularJS application with multiple tables on one page. In order to add scrolling functionality, I initially used a basic CSS code snippet like: tbody { overflow: auto; } I also experimented with the https://github. ...

htmlcssangularjsscroll

Maintaining aspect ratio in CSS grid layouts

I am in the process of designing a CSS grid layout where I want to maintain the same height for all columns. Additionally, I would like the first item to have a 16:9 aspect ratio. However, I am encountering an issue where the images are not fitting perfect ...

csscss-grid

What is the best way to reference a nested jQuery variable, whether global or local, within an HTML document

I've been working on this problem for days with no success. Any help would be greatly appreciated. I'm trying to call a variable from nested jQuery into HTML. The variable is named "PROBLEM". Even after trying to make it global, any updates made ...

javascriptjqueryhtml

Replacing elements with preg_replace in HTML including diacritics

Can someone assist me in using preg_replace for the following scenario: <p style="background:white"> <span style="font-size:10.0pt;font-family:&quot;Trebuchet MS&quot;,&quot;sans-serif&quot;"> Coût de la prestation : 43.19 . ...

phphtmlpreg-replacediacritics

Formatting text over an image

The challenge I am facing involves having an image and text on it in two separate divs with a background color. The length of the text in one div is long while the text in the second div is short, but I want to ensure that the width of both divs are equal. ...

htmlcss

What is the best way to retrieve JSON data using JavaScript within a loop?

I'm struggling to retrieve data from a JSON object. Here's the JSON structure I'm working with: var data = [ {"mes":{ "January":{ "Inversion":"1000","Fans":"1020"} ...

javascripthtmljsonfor-loop

Issues have been identified with the performance of Ionic Material List when used in conjunction with ng

In my project involving the Ionic floating menu button, everything is working fine. However, I have encountered an issue where when I click on the + button, I do not want to be able to click on the click me button while the menu is open (Req1.png)https://i ...

cssangularjsionic-framework

Learn how to simultaneously play two audio files using the same identifier in JavaScript

I'm facing an issue with two audio files that have a progress bar and both have the same ID: <audio id="player" src="<?=base_url('mp3/'.$rec->file)?>"></audio> </p> ...

javascriptphphtmljqueryaudio

Using custom or external fonts icons in Chrome Packaged Apps involves the following steps:

Seeking to enhance the appearance of my Chrome Packaged App built in AngularDart, I searched for external icons online but came up empty-handed. Despite attempting various strategies and implementing the workaround provided below, I have been unable to ach ...

cssiconsdartangular-dartgoogle-chrome-app

Using ngFor in Angular 2-5 without the need for a div container wrapping

Using ngFor in a div to display an object containing HTML from an array collection. However, I want the object with the HTML node (HTMLElement) to be displayed without being wrapped in a div as specified by the ngFor Directive. Below is my HTML code snipp ...

javascriptarraysangularhtmlngfor

Is there a way to access the origin of an iframe?

I am facing a challenge with an HTML page that includes an iframe. Within the iframe, there are text and buttons that trigger onclick scripts. However, I'm having difficulty retrieving the values of getBoundingClientRect when I specify the ID of the b ...

javascripthtmliframe

Is there a way to determine the negative horizontal shift of text within an HTML input element when it exceeds the horizontal boundaries?

On my website, I have a standard HTML input field for text input. To track the horizontal position of a specific word continuously, I have implemented a method using an invisible <span> element to display the content of the input field and then utili ...

javascripthtmlcssinput

Swift code in WKWebView shows increased word spacing in lengthy Arabic texts

Having long Arabic text within <p> tags in my HTML file (loaded by WKWebView) on my app results in unusually large word spacing and unreadable text. In Xcode, the letters in the HTML file appear disconnected. Is there a way to prevent this issue with ...

htmlwkwebview

CSS with three columns: the middle column has a fixed size, while the right and left columns

I am attempting to create a 3 column layout with specific requirements: The middle column is fixed at a width of 660px The left and right columns should each take up half of the remaining space, but have a minimum width of 120px The middle div need ...

htmlcss