Coding style 更改纯CSS3手风琴风格，以适应扩展和收缩状态

我有一个手风琴，只使用css创建，没有jquery ui。 我有一个标题（带有图标和文本的链接）和内容div（见下文）。我需要在展开时更改标题（更改图标、隐藏文本和放大日期），并在收缩时再次显示正常样式。 我怎样才能轻松做到这一点？我可能还希望在展开或收缩时更改渐变/边框

%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/

-示例：：CSS 手风琴{ 背景：#eee； 边框：1px实心#999； 填充：0 1em 24px； 宽度：500px； 利润率：2米自动； }

·手风琴h2{ 边际：12px0； }

.手风琴节{ 边框底部：1px实心#ccc； 填充：0.1em； 背景：#fff； }

.手风琴h3 a{ 显示：块； 字体大小：正常； 填充：1em 0； }

.手风琴h3 a:悬停{ 文字装饰：无； }

.手风琴h3+div{ 身高：0； 溢出：隐藏； -webkit过渡：高度0.3英寸； }

.手风琴：目标h3 a{ 文字装饰：无； 字体大小：粗体； }

.手风琴：目标h3+div{ 高度：100px； }

.手风琴.剖面.大号：目标h3+div{ 溢出：自动；

---

}

你能提供一些实际的HTML和CSS吗？我在其中留下了一条评论，你应该读一下。谢谢。我正在寻找jquery代码来完成ffg：当我的手风琴中打开一个选项卡时，我想获得该div的a链接并更改其嵌套div的样式。我想当一个div的高度发生变化时，我可以通过触发一个事件来判断它是否打开，如果它不是0，那么它是打开的……但我现在意识到这不起作用，因为将有两个高度触发器，一个用于新打开的，一个用于关闭的。所以我想我需要在我的手风琴中循环所有的刻度，检查高度，并检查开放的刻度是否改变样式。有什么想法吗？我想改变图标