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>
