|
![]() |
#1 |
Registered User
Datum registracije: Oct 2010
Lokacija: Rijeka
Postovi: 48
|
Jquery toggle show
Pozdrav, nemam baš iskustva sa jqueryem, prosao sam masu examplea na netu ali nikako da nadjem ono sto mi treba.. stvar je sljedeca.. imam u htmlu UL koji ima 2 LIa... e sad na klik tih LI-a se expanda taj div i pokazuje sadrzaj. trenutno imam ovo i to radi. samo ne znam kako napraviti da se na drugi klik sakrije sadrzaj. (opcionalno je da se promijeni tekst u recimo pokazi manje ili tako nesto). Kod html je ovako nesto HTML:
<div class="holder"> <ul class="nav"> <li><a class="link" href="#bla" data-link="first">prikaži detaljan opis</a></li> <li><a class="link" href="#bla" data-link="second">prikaži opis 2</a></li> </ul> <div class="opis" data-link="first"> neki tekst </div> <div class="opis" data-link="second"> neki tekst 2 </div> </div> Code:
<script type="text/javascript"> $('.opis').hide(); $('.link').click(function() { $('.opis').hide(); $('.opis[data-link=' + $(this).data('link') + ']').fadeIn({ width: '200px' }, 300); }); </script> HTML:
.holder { background-color: #1876AD; border-radius: 10px; color: #FFFFFF; font-family: "Verdana"; font-size: 13px; height: 100%; margin: 0 auto 20px; padding-bottom: 10px; padding-left: 15px; text-align: left; width: 945px; } .nav { background-color: #1876AD; height: 0; padding-bottom: 20px; padding-left:0px; border-radius:10px; } .nav > li { border-right: 1px solid #FFFFFF; float: left; height: 20px; margin-right: 17px; margin-top: 8px; padding-right: 17px; } .opis {display:none;} Hvala na pomoci... stvarno vise ne znam kako to napravit. Svi pimjeri na netu su sa 1 divom, ili tako nesto.. i onda je totalno neupotrebljivo
__________________
FX6300+, Radeon R7 260X 2GB, RAM: 16Gb |
![]() |
![]() |
![]() |
#2 |
Premium
Datum registracije: Mar 2009
Lokacija: Pula
Postovi: 600
|
Code:
$("#hide").click(function(){ $("p").hide(); }); $("#show").click(function(){ $("p").show(); });
__________________
Darker than a moonless night and hotter than hell itself, that is coffee. |
![]() |
![]() |
|
|
Oglas
|
|
![]() |
#3 |
Registered User
Datum registracije: Oct 2010
Lokacija: Rijeka
Postovi: 48
|
wnbeeeE puno ti hvala na odgovoru ali nikako da primjenim ovaj tvoj snippet.. jel ga mozes ukombinirat s ovim mojim ako ti nije problem. bio bih ti jako zahvalan
__________________
FX6300+, Radeon R7 260X 2GB, RAM: 16Gb |
![]() |
![]() |
![]() |
#4 |
Premium
Datum registracije: Mar 2009
Lokacija: Pula
Postovi: 600
|
__________________
Darker than a moonless night and hotter than hell itself, that is coffee. |
![]() |
![]() |
![]() |
#5 |
Registered User
Datum registracije: Oct 2010
Lokacija: Rijeka
Postovi: 48
|
uspio sam napraviti fade in fade out pa ako nekome treba ovo je jqeuery Code:
<script type="text/javascript"> $('.opis').hide(); $('.link').click(function() { $element = $('.opis[data-link=' + $(this).data('link') + ']'); if(!$element.is(":visible")) { $('.opis').hide(); } $element.fadeToggle({ width: '200px' }, 300); });</script>
__________________
FX6300+, Radeon R7 260X 2GB, RAM: 16Gb |
![]() |
![]() |
|
|
Oglas
|
|
![]() |
|
|