У меня есть аккордеон, созданный только с использованием 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;
ширина: 500 пикселей;
поле: 2em авто;
}
.accordion h2 {
поле: 12px 0;
}
.accordion .section {
border-bottom: 1px solid #ccc;
заполнение: 0 1em;
фон: #fff;
}
.accordion h3 a {
дисплей: блок;
Вес шрифта: нормальный;
заполнение: 1em 0;
}
.accordion h3 a: hover {
текстовое оформление: нет;
}
.accordion h3 + div {
высота: 0;
переполнение: скрытое;
-вебкит-переход: высота 0,3 с, легкость в установке;
}
.accordion: цель h3 a {
текстовое оформление: нет;
вес шрифта: полужирный;
}
.accordion: цель h3 + div {
высота: 100 пикселей;
} * * Тысяча двадцать-один
.accordion .section.large: target h3 + div {
переполнение: авто;
}