1 lut 2012

Rozwijany blok ze znajomymi.

Witam a więc mam coś co może wam się spodoba a dokładnie kod na rozwijany blok ze znajomymi taki jak to jest u mnie na profilu.



<style>
#znajomi .zn { width: 100%; margin-bottom: 10px; float: left;}
#znajomi .zn .avv { border: 1px solid #000; width: 60px; height: 60px; float: left; }
#znajomi .zn .zin { margin-left: 10px; width: 380px; float: left; }
#znajomi .zn .nick { border-bottom: 1px solid #157BBD; padding-bottom: 3px; }
#znajomi .zn .info { color: #FFF; }
#znajomi .rw { background: transparent url(http://joke-p.yoyo.pl/poszkole/rw.png) no-repeat; padding-left: 12px; cursor: pointer; }
#znajomi .zw { background: transparent url(http://joke-p.yoyo.pl/poszkole/zw.png) no-repeat; padding-left: 12px; cursor: pointer; }
#znajomi p { margin-bottom: 10px; }
#znajomi p:hover { border-bottom: 1px solid #FFF; }
#znajomi .ro { margin-top: 10px; }
</style>

<script>
$(document).ready( function() {
$(".ro").hide();
$(".rw").click( function() {
$(this).css("display", "none");
$(".zw").css("display", "inline");
$(".ro").slideDown("slow");
});
$(".zw").click( function() {
$(this).css("display", "none");
$(".rw").css("display", "inline");
//$(".ro").slideUp("slow");
$(".ro").hide();
});
});
</script>

<div class="blockItem" id="znajomi">
<div class="blockContent" style="color: #FFF;">
<div class="zn">
<div class="avv"><img src="Avatar" alt="avatar" width="60" height="60"></div>
<div class="zin">
<div class="nick"><a href="Link_Do_Profilu">Nick</a></div>
<div class="info">Opis.</div>
</div>
</div>
<div class="clear"></div>
<p class="rw">Rozwiń</p>
<p class="zw" style="display: none;">Zwiń</p>
<div class="ro">
<div class="zn">
<div class="avv"><img src="Avatar" alt="avatar" width="60" height="60"></div>
<div class="zin">
<div class="nick"><a href="Link">Nick</a></div>
<div class="info">Opis</div>
</div>
</div>
</div>
<div class="clear"></div>
</div>
</div>

By dodać więcej osób wystarczy że dodacie pomiędzy 'div id="ro"' a '/div'

<div class="zn">
<div class="avv">
<img alt="avatar" height="60" src="Avatar" width="60" /></div>
<div class="zin">
<div class="nick">
<a href="http://www.blogger.com/Link">Nick</a></div>
<div class="info">
Opis</div>
</div>
</div>

3 komentarze:

dominika99 pisze...

biorę ja Village

SexStrip pisze...

bardzo przydatne ;] dziekuję

ShadesOfLove. pisze...

Biore :D

Prześlij komentarz