Surogat natural pentru afişări tip acordion – details+summary

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

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

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

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

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

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

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.


Author: Ovidiu.S

Suficient de pasionat de această zonă profesională ca, în cazul în care ştiu ceva - cât de puţin - să împărtăşesc cu alţii.

Lasă un răspuns