CSS JS: testo a comparsa con effetto tendina
Ho provato a fare una tendina che si apre e si chiude per mostrare o nascondere un testo.Clicca qui per aprire la pagina di esempio.
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>Toggle</title> 6 <style> 7 .centrato { 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-nascondi { 26 max-height: 0px; 27 border: 0px solid gray; 28 } 29 #piu { 30 transition: rotate 0.5s ease-in-out; 31 } 32 .piu45 { 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="centrato usnone colblue" onclick="toggleTesto();"> 45 Clicca qui 46 <div id="piu">➕</div> 47 </div> 48 <br><br> 49 <div class="centrato">Testo n.1</div> 50 <div class="centrato"> 51 <div id="toggle-area" class="toggle toggle-nascondi"> 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="centrato">Testo n.2</div> 76 <script> 77 function toggleTesto() { 78 document.getElementById("piu").classList.toggle("piu45"); 79 document.getElementById('toggle-area').classList.toggle('toggle-nascondi'); 80 } 81 </script> 82 </body> 83 </html>
Far funzionare questo sistema a tendina è stato un po' “tricky” perchè volevo che non ci fosse occupazione di spazio quando la tendina era chiusa.
Nella riga n.18 ho usato “max-height” con un valore molto alto in pixel perchè altrimenti la transizione sarebbe stata istantanea e non progressiva.
Il selettore “toggle-nascondi” viene attivato e disattivato al click dell'utente, e permette di chiudere o aprire la tendina.
2024
26 gen
26 gen