HTML-ul implică, pe lângă utilitate şi eficienţă, eleganţă, dar şi utilitate. Astfel, uneori, structurarea informaţiei poate fi utilă prin folosirea anumitor instrumente; de exemplu, redarea blocurilor de text, grupate sub forma „acordion”, astfel încât, doar la clic să se extindă, văzând conţinutul întreg.
Se pot prelua astfel de sarcini prin combinaţia tag-urilor details şi summary.
Varianta simplă
Codul
|
1 2 3 4 |
<details> <summary>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</summary> <p>Fusce vulputate porttitor est a aliquet. Aenean lacus dui, dapibus sit amet ultrices non, cursus ac risus. Ut et diam augue. Nam eros tortor, dictum non iaculis non, scelerisque a metus.</p> </details> |
Rezultatul
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Fusce vulputate porttitor est a aliquet. Aenean lacus dui, dapibus sit amet ultrices non, cursus ac risus. Ut et diam augue. Nam eros tortor, dictum non iaculis non, scelerisque a metus.
Variantă uşor mai estetică
Codul
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
<html> <head> <style> details > summary { padding: 6px; width: 100%; background-color: #1e95ff; color:white; border: none; box-shadow: 1px 1px 2px #bbbbbb; cursor: pointer; } details > p { background-color: #ddf4ff; padding: 4px; margin: 0; box-shadow: 1px 1px 2px #aaa; } </style> </head> <body> <details> <summary>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</summary> <p>Fusce vulputate porttitor est a aliquet. Aenean lacus dui, dapibus sit amet ultrices non, cursus ac risus. Ut et diam augue. Nam eros tortor, dictum non iaculis non, scelerisque a metus. </p> </details> </body> </html> |
Rezultatul
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Fusce vulputate porttitor est a aliquet. Aenean lacus dui, dapibus sit amet ultrices non, cursus ac risus. Ut et diam augue. Nam eros tortor, dictum non iaculis non, scelerisque a metus.
„Tab” deschis cu eliminarea marker implicit
Codul
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 |
<!DOCTYPE html> <html> <head> <style> details > summary { list-style: none; cursor: pointer; font-weight: bold; font-variant:small-caps; font-size:1.15em; } details > summary::-webkit-details-marker { display: none; } summary:after { background: #016f6f; border-radius: 5px; content: "+"; color: #fff; float: left; font-size: 1.5em; font-weight: bold; margin: -5px 10px 0 0; padding: 0; text-align: center; width: 20px; } details[open] summary {background:yellow;} details[open] summary:after { content: "-"; background: #008796; } details:after { /*Elimina alunecarea (float) - poate fi folosit, preponderent, cu DIV-uri*/ content: ""; display: table; clear: both; } </style> </head> <body> <details open> <summary>Lorem ipsum dolor sit amet, consectetur adipiscing elit</summary> <p>Fusce vulputate porttitor est a aliquet. Aenean lacus dui, dapibus sit amet ultrices non, cursus ac risus. Ut et diam augue. Nam eros tortor, dictum non iaculis non, scelerisque a metus.</p> </details> <details> <summary>Integer rhoncus odio mi, sit amet ultricies odio blandit nec</summary> <p>Curabitur at ornare neque. Sed porttitor ipsum quis odio venenatis tempor. Nunc non nisi feugiat risus feugiat euismod eget eget orci. Aliquam mi diam, scelerisque ut laoreet vel, dignissim nec tellus.</p> </details> <details> <summary>Donec ipsum diam, vestibulum in neque id, molestie imperdiet risus</summary> <p>Nam eleifend neque quis augue euismod, ut blandit erat accumsan. Aenean porttitor, sem vel dapibus posuere, libero nulla convallis purus, id molestie elit lacus vel turpis.</p> </details> </body> </html> |
Rezultatul
Lorem ipsum dolor sit amet, consectetur adipiscing elit
Fusce vulputate porttitor est a aliquet. Aenean lacus dui, dapibus sit amet ultrices non, cursus ac risus. Ut et diam augue. Nam eros tortor, dictum non iaculis non, scelerisque a metus.
Integer rhoncus odio mi, sit amet ultricies odio blandit nec
Curabitur at ornare neque. Sed porttitor ipsum quis odio venenatis tempor. Nunc non nisi feugiat risus feugiat euismod eget eget orci. Aliquam mi diam, scelerisque ut laoreet vel, dignissim nec tellus.
Donec ipsum diam, vestibulum in neque id, molestie imperdiet risus
Nam eleifend neque quis augue euismod, ut blandit erat accumsan. Aenean porttitor, sem vel dapibus posuere, libero nulla convallis purus, id molestie elit lacus vel turpis.
Variaţie elegantă
Codul
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 |
<html> <head> <style> details { border: 1px solid #E1E1E1; border-radius: 5px; box-shadow: 0 1px 4px rgba(0, 0, 0, .4); color: #363636; margin: 0 0 .5em; padding: 1%; } details[open] {background: RGBA(0,135,150,.3);} details[open] p {margin:2% 0 0 0; animation: animat 0.2s linear forwards;} @keyframes animat { 0% {opacity: 0; transform: translatey(-15px);} 100% {opacity: 1; transform: translatey(0);} } details > summary { list-style: none; background: -webkit-linear-gradient(top, RGBA(0,135,150,.3) 50%, RGBA(1, 111, 111, .4) 50%); border-radius: 5px; cursor: pointer; font-weight: bold; margin: -1%; padding: 8px 0; position: relative; width: 102%; } details > summary:hover , details.eleg3[open] > summary { background: RGBA(1, 111, 111, .7); color:white; } details > summary::-webkit-details-marker {display: none;} details > summary:before { border-radius: 5px; content: "+"; color: #000; display: block; float: left; font-size: 1.5em; font-weight: bold; margin: -2px 10px 0 10px; padding: 0; text-align: center; width: 20px; } details[open] summary:before {content: "-"; margin-top: -4px; color:white;} </style> </head> <body> <details> <summary>Lorem ipsum dolor sit amet, consectetur adipiscing elit</summary> <p>Fusce vulputate porttitor est a aliquet. Aenean lacus dui, dapibus sit amet ultrices non, cursus ac risus. Ut et diam augue. Nam eros tortor, dictum non iaculis non, scelerisque a metus.</p> </details> <details> <summary>Integer rhoncus odio mi, sit amet ultricies odio blandit nec</summary> <p>Curabitur at ornare neque. Sed porttitor ipsum quis odio venenatis tempor. Nunc non nisi feugiat risus feugiat euismod eget eget orci. Aliquam mi diam, scelerisque ut laoreet vel, dignissim nec tellus.</p> </details> <details> <summary>Donec ipsum diam, vestibulum in neque id, molestie imperdiet risus</summary> <p>Nam eleifend neque quis augue euismod, ut blandit erat accumsan. Aenean porttitor, sem vel dapibus posuere, libero nulla convallis purus, id molestie elit lacus vel turpis.</p> </details> </body> </html> |
Rezultatul
Lorem ipsum dolor sit amet, consectetur adipiscing elit
Fusce vulputate porttitor est a aliquet. Aenean lacus dui, dapibus sit amet ultrices non, cursus ac risus. Ut et diam augue. Nam eros tortor, dictum non iaculis non, scelerisque a metus.
Integer rhoncus odio mi, sit amet ultricies odio blandit nec
Curabitur at ornare neque. Sed porttitor ipsum quis odio venenatis tempor. Nunc non nisi feugiat risus feugiat euismod eget eget orci. Aliquam mi diam, scelerisque ut laoreet vel, dignissim nec tellus.
Donec ipsum diam, vestibulum in neque id, molestie imperdiet risus
Nam eleifend neque quis augue euismod, ut blandit erat accumsan. Aenean porttitor, sem vel dapibus posuere, libero nulla convallis purus, id molestie elit lacus vel turpis.
Încă o variantă elegantă
Codul
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 |
<!DOCTYPE html> <html> <head> <style> details { font: 16px "Open Sans", Calibri, sans-serif; width: 800px; } details > summary { padding: 3px 10px; width: 24em; background-color: RGB(1, 111, 111); color:white; border: none; box-shadow: 3px 3px 4px darkgrey; cursor: pointer; list-style: none; } details > summary::-webkit-details-marker { display: none; } details > p { border-radius: 0 0 15px 5px; background-color: RGBA(1, 111, 111, .3); padding: 2px 6px; margin: 0; box-shadow: 3px 3px 4px gray; } </style> </head> <body> <details> <summary>Lorem ipsum dolor sit amet, consectetur adipiscing elit</summary> <p>Donec eget pharetra risus. Ut sed dictum dolor, ac fringilla velit. Sed eu sapien magna. Duis ullamcorper, nisl quis maximus auctor, massa sem imperdiet ante, at tincidunt nibh metus eu risus. Ut luctus risus tellus. Vestibulum enim ligula, molestie nec finibus a, semper nec tortor. Suspendisse sed sapien sit amet nunc bibendum sagittis sit amet ac dolor. Morbi diam lacus, ornare in congue id, lacinia et purus. Nullam purus leo, vehicula non ante eu, sagittis ultricies lacus. Phasellus massa nisl, semper sit amet neque a, scelerisque pretium odio. Curabitur ac nunc augue. Pellentesque sed imperdiet lorem, nec iaculis augue. Aliquam erat volutpat.</p> </details> </body> </html> |
Rezultatul
Lorem ipsum dolor sit amet, consectetur adipiscing elit
Donec eget pharetra risus. Ut sed dictum dolor, ac fringilla velit. Sed eu sapien magna. Duis ullamcorper, nisl quis maximus auctor, massa sem imperdiet ante, at tincidunt nibh metus eu risus. Ut luctus risus tellus. Vestibulum enim ligula, molestie nec finibus a, semper nec tortor. Suspendisse sed sapien sit amet nunc bibendum sagittis sit amet ac dolor. Morbi diam lacus, ornare in congue id, lacinia et purus. Nullam purus leo, vehicula non ante eu, sagittis ultricies lacus. Phasellus massa nisl, semper sit amet neque a, scelerisque pretium odio. Curabitur ac nunc augue. Pellentesque sed imperdiet lorem, nec iaculis augue. Aliquam erat volutpat.
Detalii imbricate
Codul
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 |
<html> <head> <style> /* DETAILS & SUMMARY - varianta 3*/ details.eleg3 { border: 1px solid #E1E1E1; border-radius: 5px; box-shadow: 0 1px 4px rgba(0, 0, 0, .4); color: #363636; margin: 0 0 .5em; padding: 1%; } details.eleg3[open] {background: RGBA(0,135,150,.3);} details.eleg3[open] p { margin:2% 0 0 0; animation: animat 0.2s linear forwards; } @keyframes animat { 0% {opacity: 0; transform: translatey(-15px);} 100% {opacity: 1; transform: translatey(0);} } details.eleg3 > summary { list-style: none; background: -webkit-linear-gradient(top, RGBA(0,135,150,.3) 50%, RGBA(1, 111, 111, .4) 50%); border-radius: 5px; cursor: pointer; font-weight: bold; margin: -1%; padding: 8px 0; position: relative; width: 102%; } details.eleg3 > summary:hover , details.eleg3[open] > summary { background: RGBA(1, 111, 111, .7); color:white; } details.eleg3 > summary::-webkit-details-marker {display: none;} details.eleg3 > summary:before { border-radius: 5px; content: "+"; color: #000; display: block; float: left; font-size: 1.5em; font-weight: bold; margin: -2px 10px 0 10px; padding: 0; text-align: center; width: 20px; } details.eleg3[open] summary:before { content: "-"; margin-top: -4px; color:white; } /* DETAILS & SUMMARY - varianta 1*/ details.eleg1 > summary { list-style: none; padding: 6px; width: 100%; background-color: #1e95ff; color:white; border: none; box-shadow: 1px 1px 2px #bbbbbb; cursor: pointer; } details.eleg1 > p { background-color: #ddf4ff; padding: 4px; margin: 0; box-shadow: 1px 1px 2px #aaa; } </style> </head> <body> <details class="eleg3"> <summary>Lorem ipsum dolor sit amet, consectetur adipiscing elit</summary> <p>Fusce vulputate porttitor est a aliquet. Aenean lacus dui, dapibus sit amet ultrices non, cursus ac risus. Ut et diam augue. Nam eros tortor, dictum non iaculis non, scelerisque a metus.</p> <details class="eleg1"> <summary>Cras non felis felis</summary> <p>Quisque ac commodo dui, fringilla convallis orci. Nam eu lacinia ante, in condimentum felis. Cras tempus, turpis eget volutpat accumsan, urna lorem ultrices ligula, id pellentesque nibh dolor a diam. </p> </details> <details class="eleg1"> <summary>Integer rhoncus odio mi, sit amet ultricies odio blandit nec</summary> <p>Curabitur at ornare neque. Sed porttitor ipsum quis odio venenatis tempor. Nunc non nisi feugiat risus feugiat euismod eget eget orci. Aliquam mi diam, scelerisque ut laoreet vel, dignissim nec tellus.</p> </details> </details> <details class="eleg3"> <summary>Integer rhoncus odio mi, sit amet ultricies odio blandit nec</summary> <p>Curabitur at ornare neque. Sed porttitor ipsum quis odio venenatis tempor. Nunc non nisi feugiat risus feugiat euismod eget eget orci. Aliquam mi diam, scelerisque ut laoreet vel, dignissim nec tellus.</p> </details> </body> </html> |
Rezultatul
Lorem ipsum dolor sit amet, consectetur adipiscing elit
Fusce vulputate porttitor est a aliquet. Aenean lacus dui, dapibus sit amet ultrices non, cursus ac risus. Ut et diam augue. Nam eros tortor, dictum non iaculis non, scelerisque a metus.
Cras non felis felis
Quisque ac commodo dui, fringilla convallis orci. Nam eu lacinia ante, in condimentum felis. Cras tempus, turpis eget volutpat accumsan, urna lorem ultrices ligula, id pellentesque nibh dolor a diam.
Integer rhoncus odio mi, sit amet ultricies odio blandit nec
Curabitur at ornare neque. Sed porttitor ipsum quis odio venenatis tempor. Nunc non nisi feugiat risus feugiat euismod eget eget orci. Aliquam mi diam, scelerisque ut laoreet vel, dignissim nec tellus.
Integer rhoncus odio mi, sit amet ultricies odio blandit nec
Curabitur at ornare neque. Sed porttitor ipsum quis odio venenatis tempor. Nunc non nisi feugiat risus feugiat euismod eget eget orci. Aliquam mi diam, scelerisque ut laoreet vel, dignissim nec tellus.
