Change Pure CSS3 Accordion Style for expanded and contracted states
I have an accordion, created using css only, no jquery ui. I have a header (link with an icon and text) and content div as per normal (see below). I need to change the header (change icon, hide the text and enlarge the date) when expanded and show the normal styles again when contracted. How can I do this easily? I might also want to change the gradients/borders when expanded or contracted.
%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 { background: #eee; border: 1px solid #999; padding: 0 1em 24px; width: 500px; margin: 2em auto; }
.accordion h2 { margin: 12px 0; }
.accordion .section { border-bottom: 1px solid #ccc; padding: 0 1em; background: #fff; }
.accordion h3 a { display: block; font-weight: normal; padding: 1em 0; }
.accordion h3 a:hover { text-decoration: none; }
.accordion h3 + div { height: 0; overflow: hidden; -webkit-transition: height 0.3s ease-in; }
.accordion :target h3 a { text-decoration: none; font-weight: bold; }
.accordion :target h3 + div { height: 100px; }
.accordion .section.large:target h3 + div { overflow: auto; }
链接地址: http://www.djcxy.com/p/87498.html上一篇: 在Div中中心放大图像