本节书摘来自异步社区《HTML5 开发实例大全》一书中的第1章，第1.8节,作者： 张明星 更多章节内容可以访问云栖社区“异步社区”公众号查看。
实例说明
本实例和上一个实例有异曲同工之妙，首先在网页中显示一行文本“想了解详情吗？”。当单击左侧的小三角符号后，将在下方无刷新弹出一个下拉区域，在里面同时显示图片和文本。本实例和上一个实例相比，多显示了一幅图片。本实例的素材图片是123.png，如图1-14所示。
具体实现
使用Dreamweaver创建一个名为“008.html”的文件，具体代码如下所示：
<!DOCTYPE html> <html> <head> <meta charset=utf-8 /> <title>脚本控制交互元素<details></title> <style type="text/css"> body { font-family: sans-serif; } details { overflow: hidden; background: #e3e3e3; margin-bottom: 10px; display: block; } details summary { cursor: pointer; padding: 10px; } details div { float: left; width: 65%; } details div h3 { margin-top: 0; } details img { float: left; width: 200px; padding: 0 30px 10px 10px; } </style> </head> <body> <details> <summary>想了解详情吗</summary> <img src="123.png" alt="DDD" /> <div> <h3> 永远的高富帅 </h3> <p>我的一个眼神，能够秒杀任何一切生物.............. 我的一个眼神，能够秒杀任何一切生物.............. 我的一个眼神，能够秒杀任何一切生物.............. 我的一个眼神，能够秒杀任何一切生物.............. </p> </div> </details> </body> </html>执行后的效果如图1-15所示，单击文字左侧的小三角形符号后，在下方无刷新弹出一个新的区域，在这个区域内同时显示图片和文本，如图1-16所示。
在本实例中，当页面加载时将只会看到summary文本。如果想要默认显示这样的状态，需要把openattribute添加到details元素里：< details open >。
相关资源：Html5游戏开发实例源码集锦