0

I have a <details> section in my HTML file like (MWE):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en-US">
<head>
<meta http-equiv="Content-Type" content="text/xhtml;charset=UTF-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=11"/>
<title>My Project</title>
</head>
<body>
  <details>
    <summary> The summary 1</summary>
    Line 1<br>
    Line 2<br>
    Line 3<br>
    Line 4<br>
  </details>
</body>
</html>

and when clicking on the arrow the the details are show as one block at once.

Edit The text block is here shown as 4 lines but can be from 1 ... End edit

It there a possibility to smoothly show them like it is done in this example (taken from https://www.w3schools.com/css/css3_transitions.asp):

<!DOCTYPE html>
<html>
<head>
<style> 
div {
  width: 100px;
  height: 100px;
  background: red;
  transition: height 2s;
}

div:hover {
  height: 300px;
}
</style>
</head>
<body>

<h1>The transition Property</h1>

<p>Hover over the div element below, to see the transition effect:</p>
<div></div>

</body>
</html>
albert
  • 8,285
  • 3
  • 19
  • 32
  • Does this answer your question? [How To Add CSS3 Transition With HTML5 details/summary tag reveal?](https://stackoverflow.com/questions/38213329/how-to-add-css3-transition-with-html5-details-summary-tag-reveal) – tacoshy Oct 05 '22 at 09:23
  • Thanks for the suggestion. I tried the suggestions: https://stackoverflow.com/a/38213471/1657886 here only the resulting first line is shown. https://stackoverflow.com/a/38215801/1657886 and https://stackoverflow.com/a/67814400/1657886 no idea how to get this working in my example. https://stackoverflow.com/a/66482293/1657886 text is shown at once. https://stackoverflow.com/a/73447722/1657886 text shown at once, margine eased in. Note the height is flexible (here 4 lines but this can range from 1 ...). Unfortunately no success. – albert Oct 05 '22 at 09:45
  • @albert There's no builtin way to animate the `details` element. You may check [this answer](https://stackoverflow.com/questions/38213329/how-to-add-css3-transition-with-html5-details-summary-tag-reveal#answer-73447722) as it could be helpful to *fake* an open/close transition. – ThS Oct 05 '22 at 09:53
  • @ths as far as I can tell the answer https://stackoverflow.com/a/73447722/1657886 shows the text (`Line1`...) at once and more or less smoothly shows the margin above the test – albert Oct 05 '22 at 09:56
  • @albert as I said, there no way to animate `details` elements. You may think of creating your own accordion component (using `jQuery` maybe). – ThS Oct 05 '22 at 09:57
  • @ths thanks, but I have no experience with "creating your own accordion component (using jQuery maybe)", so I was hoping ... – albert Oct 05 '22 at 09:59
  • 1
    @albert you may take a look at [`jQuery UI` Accordion Component](https://jqueryui.com/accordion/). – ThS Oct 05 '22 at 10:01
  • @ths I don't think the accordion component is suitable but mabye the Easing component (https://jqueryui.com/easing/ ) – albert Oct 05 '22 at 10:09
  • @albert that depends on your requirements. – ThS Oct 05 '22 at 10:09
  • Just curious, the 1st code snippet shared is in xhtml, why are you using xhtml? – AbhishekGowda28 Oct 05 '22 at 10:58
  • @AbhishekGowda28 It is generated code where html and xhtml extension can be used. – albert Oct 05 '22 at 11:16

0 Answers0