我有一个手风琴，仅使用css创建，没有jquery ui . 我有一个 Headers （带有图标和文本的链接）和内容div按照正常情况（见下文） . 我需要在展开时更改 Headers （更改图标，隐藏文本并放大日期），并在签约时再次显示正常样式 . 我怎么能这么容易做到？我可能还想在扩展或收缩时更改渐变/边框 .

%h3
      %a{:href => "#one"} 
        %div.iconWithNumber 1
        %div.date Jan 31 
        %div.textExcerpt blah...
    %div
      %p 
       Content
  • 实例：HTML
http://www.paulrhayes.com/2009-06/accordion-using-only-css/

-example :: CSS CSS：.accordion {background：#eee;边框：1px solid＃999;填充：0 1em 24px;宽度：500px;保证金：2em auto; }

.accordion h2 {margin：12px 0; }

.accordion .section {border-bottom：1px solid #ccc;填充：0 1em;背景：#fff; }

.accordion h3 a {display：block; font-weight：normal;填充：1em 0; }

.accordion h3 a：hover {text-decoration：none; }

.accordion h3 div {height：0;溢出：隐藏; -webkit-transition：高度0.3s轻松; }

.accordion：target h3 a {text-decoration：none; font-weight：bold; }

.accordion：target h3 div {height：100px; }

.accordion .section.large：target h3 div {overflow：auto; }

coding-style css3 accordion