chevron-left chevron-right

[CSS][HTML] Rozwijana treść w stylu accordion

W dzisiejszym artykule poruszę temat efektownego sposobu na prezentację treści na stronach WWW opartego tylko i wyłącznie o możliwości najnowszej wersji języka CSS. Celem jest stworzenie animowanej prezentacji treści, w której każdy artykuł jest swoistą zakładką pokazywaną po kliknięciu w tytuł. Poprzednio otwarta zakładka automatycznie się schowa.

Wygląda to dość prosto, ale jest kilka dodatkowych "smaczków" które chciałbym aby były ujęte w tym mechanizmie. Prezentacja treści ma mieć animowaną akcję rozwijania się, powinna być obsługiwana za pomocą klawiatury(przełączanie zakładek za pomocą Tab, a potem otwieranie Enter) oraz element z treścią ma się znajdować na środku elementu nadrzędnego w którym akurat się znajduje.

Struktura HTML dla accordion - krótkie wytłumaczenie semantyki

Na początek należy przygotować strukturę HTML naszego mechanizmu:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

<section>
	<article>
		<a href="#art1" id="art1"><h2>Artykuł 1</h2></a>
		<p>Litwo! Ojczyzno moja! ...</p>
	</article>
	<article>
		<a href="#art2" id="art2"><h2>Artykuł 2</h2></a>
		<p>Litwo! Ojczyzno moja! ...</p>
	</article>
	<article>
		<a href="#art3" id="art3"><h2>Artykuł 3</h2></a>
		<p>Litwo! Ojczyzno moja! ...</p>
	</article>
	<article>
		<a href="#art4" id="art4"><h2>Artykuł 4</h2></a>
		<p>Litwo! Ojczyzno moja! ...</p>
	</article>
</section>

Do każdego linka przypisałem id, dzięki czemu można je odpowiednio ozdobić odpowiednimi stylami (dla środkowych elementów można równie dobrze wstawić klasę: class, zamiast identyfikatora: id).
Zastosowałem nowe, semantyczne podejście wprowadzone przez HTML5. Elementami accordion będą artykuły w tagach article znajdujące się w sekcji - section. W niektórych przypadkach zamiast section można użyć div. Należey jednak pamiętać, że w tym drugim przypadku semantyka będzie wskazywała na mniejszą ważność elementu i jego "dzieci".
W HTML5 semantyczne znaczenie znacznika section mówi nam, że w tym elemencie znajdują się rzeczy ważne dla kontekstu elementu nadrzędnego (w naszym przypadku strony jako całości), a znacznik div nie ma żadnego semantycznego znaczenia i jest tylko elementem struktury szablonu.

Wygląd accordion z wykorzystaniem CSS

Kolejnym krokiem będzie zdefiniowane wyglądu naszej struktury za pomocą CSS:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86

* {
	margin:0;
	padding:0;
}
body {
	font: 14px/21px Arial, Helvetica, sans-serif;
	width: 100%;
	height: 100%;
	/*style elementu nadrzędnego w stosunku do accordion - CSS3 Flexible Box Model*/
	display: -webkit-box;
    display: -moz-box;
    display: box;
	-webkit-box-orient: vertical;
    -moz-box-orient: vertical;
    -ms-box-orient: vertical;
    box-orient: vertical;
    -webkit-box-pack: center;
    -moz-box-pack: center;
    -ms-box-pack: center;
    box-pack: center;
    -webkit-box-align: center;
    -moz-box-align: center;
    -ms-box-align: center;
    box-align: center;
	background: #eee;
}
header { width: 960px; }
header, section { margin: 20px auto; }
section {
	width:250px;
    background:#fff;
    border-radius: 5px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3)
}
p {
    height:0;
    padding:0 15px;
    overflow:hidden;
    -webkit-transition: height 0.4s ease-out, padding 0.4s ease-out;
    -moz-transition: height 0.4s ease-out, padding 0.4s ease-out;
    -o-transition: height 0.4s ease-out, padding 0.4s ease-out;
    transition: height 0.4s ease-out, padding 0.4s ease-out
}
a {
    display: block;
    height: 23px;
    line-height: 23px;
    background: -webkit-linear-gradient(#eee, #ccc);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #eee), color-stop(1, #ccc));
    background: -moz-linear-gradient(#eee, #ccc);
    background: -o-linear-gradient(#eee, #ccc);
    background: linear-gradient(#eee, #ccc);
    background: -webkit-linear-gradient(#eee, #ccc);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #eee), color-stop(1, #ccc));
    background: -moz-linear-gradient(#eee, #ccc);
    background: -o-linear-gradient(#eee, #ccc);
    background: linear-gradient(#eee, #ccc);
    color: #333;
    text-decoration: none;
    text-align: center;
    text-shadow: 0 1px 0 rgba(255,255,255,.5);
    border-bottom: 1px solid #aaa;
}
#art2, #art3 { border-radius: 2px 2px 0 0  }
#art4 { border-radius: 0 0 3px 3px }
a:active{
    background: -webkit-linear-gradient(#ccc, #ddd);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #ccc), color-stop(1, #ddd));
    background: -moz-linear-gradient(#ccc, #ddd);
    background: -o-linear-gradient(#ccc, #ddd);
    background: linear-gradient(#ccc, #ddd);
    background: -webkit-linear-gradient(#ccc, #ddd);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #ccc), color-stop(1, #ddd));
    background: -moz-linear-gradient(#ccc, #ddd);
    background: -o-linear-gradient(#ccc, #ddd);
    background: linear-gradient(#ccc, #ddd);
    color: #000;
}
:target + p {
    padding: 10px 15px;
    border-bottom: 1px solid #ccc;
}
#art1:target + p, 
#art2:target + p, 
#art3:target + p, 
#art4:target + p { height: 100px; }

W powyższym kodzie zastosowano nowy model "pudełka", który został wprowadzony wraz z CSS w wersji 3. Zapewni on wystarczającą elastyczność rozwiązania problemu z pozycjonowaniem elementu accordion. Zastosowano również atrybuty tła elementów będące gradientami. Widać, że jest wiele powtarzających się atrybutów dla tła i innych. Ma to na celu zapewnienie obsługi jak tych atrybutów jak największej liczbie przeglądarek. Jak zwykle, przeglądarki Internet Explorer stoją na straconej pozycji i dla nich trzeba przygotować odpowiednio wyglądający drawback, czyli rozwiązanie zastępcze zawierające podstawową funkcjonalność mechanizmu accordion.

Udostępniam demo z artykułu do wglądu: rozwijana harmonijka w CSS