Forumi
Home Pravila i pomoć Članovi Kalendar Današnji postovi


Povratak   PC Ekspert Forum > Računala > Software > Web dizajn, programiranje i ostalo
Ime
Lozinka

Odgovori
 
Uređivanje
Staro 20.01.2014., 19:40   #1
Mane
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>
Jquery je ovo
Code:
<script type="text/javascript">
$('.opis').hide();

$('.link').click(function() {
   $('.opis').hide();       
    $('.opis[data-link=' + $(this).data('link') + ']').fadeIn({
        width: '200px'
    }, 300);
});
</script>
CSS
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;}    
I sad kuzim otprilike sta radiq jquery (ovo se moze napravit za koliko god primjera na stranici, samo treba data link mjenjat naravno) ali nikako dokucit kako napravit da se na drugi klik vrati u 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
Mane je offline   Reply With Quote
Staro 20.01.2014., 19:45   #2
wnbeeeE
Premium
 
wnbeeeE's Avatar
 
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.
wnbeeeE je offline   Reply With Quote
Oglasni prostor
Oglas
 
Oglas
Staro 20.01.2014., 20:46   #3
Mane
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
Mane je offline   Reply With Quote
Staro 20.01.2014., 21:15   #4
wnbeeeE
Premium
 
wnbeeeE's Avatar
 
Datum registracije: Mar 2009
Lokacija: Pula
Postovi: 600
Citiraj:
Autor Mane Pregled postova
ali nikako dokucit kako napravit da se na drugi klik vrati u display:none
Evo ti konkretan primjer pa se probaj poigrat.

http://jsfiddle.net/bcekU/1/
__________________
Darker than a moonless night and hotter than hell itself, that is coffee.
wnbeeeE je offline   Reply With Quote
Staro 21.01.2014., 09:53   #5
Mane
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
Mane je offline   Reply With Quote
Oglasni prostor
Oglas
 
Oglas
Odgovori



Pravila postanja
Vi ne možete otvarati nove teme
Vi ne možete pisati odgovore
Vi ne možete uploadati priloge
Vi ne možete uređivati svoje poruke

BB code je Uključeno
Smajlići su Uključeno
[IMG] kod je Uključeno
HTML je Isključeno

Idi na