CSS JS: text with drop down effect

I tried to make a drop down text that opens and closes to show or hide text.

Click here to open the example page.
    1 <!DOCTYPE html>
    2 <html>
    3     <head>
    4         <meta charset="utf-8">
    5         <title>Toggle</title>
    6         <style>
    7             .centered {
    8                 display: flex;
    9                 justify-content: center;
   10                 align-items: center;
   11                 flex-wrap: wrap;
   12             }
   13             .toggle {
   14                 border: 2px solid gray;
   15                 border-radius: 2em;
   16                 box-shadow: rgba(0, 0, 0, 0.24) 0px 0.2em 2em;
   17                 width: 90%;
   18                 max-height: 1000px;
   19                 transition: max-height 0.5s ease-in-out, border 0.5s ease-in-out;
   20                 overflow: hidden;
   21             }
   22             .toggle-in {
   23                 padding: 2em;
   24             }
   25             .toggle-hide {
   26                 max-height: 0px;
   27                 border: 0px solid gray;
   28             }
   29             #plus {
   30                 transition: rotate 0.5s ease-in-out;
   31             }
   32             .plus45 {
   33                 rotate: 45deg;
   34             }
   35             .usnone {
   36                 user-select: none;
   37             }
   38             .colblue {
   39                 color: blue;
   40             }
   41         </style>
   42     </head>
   43     <body>
   44         <div id="stringato" class="centered usnone colblue" onclick="toggleText();">
   45             Click here&nbsp;
   46             <div id="plus">➕</div>
   47         </div>
   48         <br><br>
   49         <div class="centered">Text n.1</div>
   50         <div class="centered">
   51             <div id="toggle-area" class="toggle toggle-hide">
   52                 <div class="toggle-in">
   53 <p>
   54     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vitae sollicitudin ipsum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Nam ultrices eu nunc id semper. Vestibulum eleifend egestas purus laoreet venenatis. Vivamus sed elementum libero. In hac habitasse platea dictumst. Vivamus venenatis, tortor in pulvinar egestas, arcu eros congue nulla, vel egestas dolor velit eu ante. Quisque at dui sit amet ex suscipit posuere. Donec consectetur vehicula orci, a tempus leo pretium vitae.
   55 </p>
   56 
   57 <p>
   58     Nunc mollis ipsum nec accumsan efficitur. Nullam in erat non velit eleifend suscipit. Vestibulum sollicitudin massa a ligula interdum, nec mollis purus vestibulum. Cras fermentum, felis ac dictum tempus, sem dolor pretium enim, nec maximus mi ipsum eu erat. Sed egestas iaculis odio, sit amet aliquet leo rhoncus vel. In quis arcu condimentum, consequat mauris quis, porttitor ipsum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Quisque efficitur ac massa porttitor pharetra. Etiam posuere mollis odio vel condimentum. Phasellus pulvinar vestibulum turpis, at placerat turpis mollis non.
   59 </p>
   60 
   61 <p>
   62     Integer eleifend bibendum leo at convallis. Cras cursus risus nisi, vulputate dignissim erat vestibulum et. Fusce sem elit, eleifend vel elementum sit amet, malesuada ac massa. Praesent vel mi vitae massa porta viverra. Nullam non nisl ut leo tincidunt mattis. Etiam aliquet dui vel turpis ullamcorper volutpat. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nunc ultrices eleifend massa, ac auctor massa. Phasellus porta nulla vel erat consequat aliquam. Suspendisse molestie eros vel pharetra maximus. Duis nec cursus neque. Cras commodo nisl aliquam, euismod quam ut, sodales massa. Donec eu urna eget tellus semper gravida vitae fermentum velit.
   63 </p>
   64 
   65 <p>
   66     Vestibulum nibh nisi, consequat a mi sed, ultrices commodo dui. Nam vulputate diam eu justo mollis finibus. Nam quis sem facilisis felis pharetra tristique vel in massa. Morbi lorem tellus, aliquam nec bibendum non, eleifend in lectus. Sed laoreet euismod diam sed dignissim. Aliquam erat volutpat. Fusce enim turpis, laoreet eget imperdiet quis, consectetur sit amet lacus. Vestibulum ullamcorper risus id nunc sodales hendrerit. Sed ac venenatis purus. Mauris fermentum urna et leo consectetur, quis mollis velit molestie. Integer elementum dui id quam pellentesque ullamcorper.
   67 </p>
   68 
   69 <p>
   70     Nulla tristique sapien imperdiet quam feugiat volutpat. Ut accumsan dolor scelerisque turpis imperdiet scelerisque. Nunc laoreet gravida finibus. Pellentesque faucibus sapien non justo lobortis tempor. Curabitur ac mi sem. Sed consectetur tempor lacus in feugiat. Donec efficitur nibh eros, nec faucibus lacus dictum ac. Etiam vitae sodales sem, in dictum augue. Cras massa magna, fermentum eget ex nec, cursus venenatis ante. Curabitur imperdiet facilisis risus vel accumsan. Praesent in diam ut purus gravida porttitor. Curabitur eget urna in nisl venenatis vulputate. Cras orci mauris, finibus eu pulvinar eu, blandit id libero. 
   71 </p>
   72                 </div>
   73             </div>
   74         </div>
   75         <div class="centered">Text n.2</div>
   76         <script>
   77             function toggleText() {
   78                 document.getElementById("plus").classList.toggle("plus45");
   79                 document.getElementById('toggle-area').classList.toggle('toggle-hide');
   80             }
   81         </script>
   82     </body>
   83 </html>
Making this drop-down text work was a bit tricky, because I wanted to have no space taken up when the drop down text was closed.

At line n.18 I used “max-height” with a very high value in pixels, because otherwise the transition would have been instantaneous and non-progressive.
The “toggle-hide” selector is activated and deactivated when the user do a click, and allows you to close or open the drop down text.
2024
Jan, 26