html+css3+jq手风琴上下切换效果

准备好需要用到的图标。

书写css代码。#container { width: 980px; margin: 50px auto; }.accordion_container { border: 1px solid #aaa; margin: 0 11.5px; }.accordion_container > h1 { z-index: 4; padding: 5px 8px; color: #393939; font-weight: bold; border-bottom: 1px solid #aaa; font-size: 123.1%; margin: 0; }.accordion_container { width: 220px; }.accordion_container .content, .accordion_container .tab { width: 200px; }.accordion_container .tab { background-color: #ededed; height: 55px; border-bottom: 1px solid #aaa; }.accordion_container .tab strong { font-weight: bold; font-size: 93%; }.accordion_container .tab { padding: 10px; }.accordion_container .tab p { font-size: 85%; color: #666; }.accordion_container .content { background-color: #ededed; padding: 10px; }.accordion_container .content img { display: block; width: 200px; height: 95px; }.accordion_container .first { z-index: 3; top: 0px; }.accordion_container .second { z-index: 2; top: 76px; }.accordion_container .third { z-index: 1; top: 152px; }.accordion { position: relative; overflow: hidden; height: 342px; }.accordion > div { position: absolute; left: 0px; border-left: 1px solid #aaa; border-right: 1px solid #aaa; left: -1px; cursor: pointer; background-color: #f7f7f7; }.hide { }

书写并添加js代码。

书写并添加js代码。

代码整体结构。

查看效果。