PC Ekspert Forum

PC Ekspert Forum (https://forum.pcekspert.com/index.php)
-   Web dizajn, programiranje i ostalo (https://forum.pcekspert.com/forumdisplay.php?f=39)
-   -   Jquery toggle show (https://forum.pcekspert.com/showthread.php?t=255915)

Mane 20.01.2014. 19:40

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:


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

wnbeeeE 20.01.2014. 19:45

Code:

$("#hide").click(function(){
  $("p").hide();
});

$("#show").click(function(){
  $("p").show();
});


Mane 20.01.2014. 20:46

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

wnbeeeE 20.01.2014. 21:15

Citiraj:

Autor Mane (Post 2531992)
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/

Mane 21.01.2014. 09:53

uspio sam napraviti fade in fade out pa ako nekome treba ovo je jqeuery

Code:




Sva vremena su GMT +2. Sada je 05:15.

Powered by vBulletin®
Copyright ©2000 - 2025, Jelsoft Enterprises Ltd.
© 1999-2024 PC Ekspert - Sva prava pridržana ISSN 1334-2940
Ad Management by RedTyger