为扩展和收缩状态更改纯CSS3手风琴风格

Question

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

%h3
      %a{:href => "#one"} 
        %div.iconWithNumber 1
        %div.date Jan 31 
        %div.textExcerpt blah...
    %div
      %p 
       Content

-example：HTML

  http://www.paulrhayes.com/2009-06/accordion-using-only-css/

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

.accordion h2 {     保证金：12px 0; }

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

.accordion h3 a {     显示：块;     font-weight：normal;     填充：1em 0; }

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

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

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

.accordion：target h3 + div {     身高：100px; }

.accordion .section.large：target h3 + div {     溢出：自动; }