Cześć, chciałbym dodać rozwijanie się treści ( w moim przypadku obrazków) po kliknięciu na napis na tle o treści "Odznaczenia" czy coś w ten desień. Nie chciałbym mieszkać w to kodu js bo nie wiem czy nie bd konfliktów różnych. Spotkałem się z: http://blog.piotrnal...tylu-accordion/
Problem w tym, że nie da sie tego zwinąć spowrotem a treść jest dziwnie ustawiona: http://i.imgur.com/EByjyH4.png
Po przerobieniu(usunięciu kilku linijek) kod wygląda tak:
CSS
section { width:250px; background:#fff; border-radius: 0px; } 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; } 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,
HTML
<section> <article> <a href="#art1" id="art1"><h2>Artykuł 1</h2></a> <p> Litwo! Ojczyzno moja! ...</p> </article> </section>