Details Example -- Source Code
HTML Page -- index.htm
<!DOCTYPE html>
<!-- Details Example
Source code file: index.htm
Use a details element to hide information. -->
<html>
<head>
<meta content="text/html; charset=utf-8"
http-equiv="Content-Type">
<title>Details Example</title>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<h1>Details Example</h1>
<details>
<summary>Lorem ipsum dolor sit amet.</summary>
Lorem ipsum dolor sit amet, consectetur
adipiscing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua.
Cum sociis natoque penatibus et. Elit scelerisque
mauris pellentesque pulvinar. Quis hendrerit
dolor magna eget est lorem ipsum dolor sit. Leo
urna molestie at elementum eu facilisis sed odio.
Pharetra diam sit amet nisl suscipit adipiscing.
Vestibulum sed arcu non odio euismod. Dolor sed
viverra ipsum nunc aliquet. Enim tortor at auctor
urna nunc id cursus metus aliquam. Tristique senectus
et netus et malesuada. Enim eu turpis egestas pretium
aenean pharetra magna ac. Ac tortor dignissim
convallis aenean et tortor at risus viverra. Id
venenatis a condimentum vitae sapien pellentesque
habitant. Porta lorem mollis aliquam ut. Dui vivamus
arcu felis bibendum ut tristique et egestas quis. Urna
neque viverra justo nec ultrices. Velit laoreet id donec
ultrices tincidunt arcu. Phasellus faucibus scelerisque
eleifend donec pretium vulputate sapien nec. Sit amet
dictum sit amet justo donec enim. Tortor posuere ac ut
consequat semper viverra nam libero.
</details><br>
<details>
<summary>Vestibulum lorem sed risus ultricies tristique
nulla aliquet enim.</summary>
Vestibulum lorem sed risus ultricies tristique nulla
aliquet enim. Sapien faucibus et molestie ac. Eu turpis
egestas pretium aenean pharetra. Mollis nunc sed id
semper risus in hendrerit gravida. Habitant morbi
tristique senectus et netus et. Quis commodo odio
aenean sed adipiscing diam donec adipiscing tristique.
Id aliquet risus feugiat in ante metus dictum.
Fringilla urna porttitor rhoncus dolor purus non.
Ornare quam viverra orci sagittis eu volutpat.
Vestibulum mattis ullamcorper velit sed ullamcorper
morbi tincidunt ornare. Maecenas ultricies mi eget
mauris pharetra et ultrices neque ornare. Nunc sed
id semper risus in. Consequat ac
felis donec et.
</details>
</body>
</html>
CSS Page -- styles.css
/* Details Example
Source code file: details.css
Use a details element to hide information. */
body { background-color: #e0e0e0;
color: #000060;
font-family: Verdana, Arial, sans-serif; }