jQuery - zobrazit viac/menej

eNyCe

Zdravím vôbec si neviem poradiť so skrývaním časti divu. Chcem zobraziť celý div po kliknutí na Citaj viac to mi funguje ale, následne neviem ako ten div zasa skryť ak znova kliknem na Zobrazit menej.

Skúšal som to cez addClass ktorú som pridal keď som klikol na citaj viac a následne som si spravil funkciu aby po kliknutí na tú novú triedu mi ten div skrylo ale nejak to nefungovalo.

Tu je môj problém na jsFiddle http://jsfiddle.net/HUmMp/

HTML

Kód: Vybrať všetko

<div class="obsah">
    <p>Text</p>
    <p>Text</p>
    <p>Text</p>
    <p>Text</p>
    <p>Text</p>
    <p>Text</p>
    <p>Text</p>
    <p>Text</p>
    <p>Text</p>
    <p>Text</p>
    <p>Text</p>
</div>
<span class="citajviac">Citaj viac</span>

CSS

Kód: Vybrať všetko

.obsah {
    height: 100px;
    overflow: hidden;
    color: #fff;
    background: red;
}

JS

Kód: Vybrať všetko

$(".citajviac").click(function(){
	$(".obsah").css({"height" : "auto", "overflow" : "visible"});
	$("span.citajviac").html('Zobraziť menej');
});

*****HERO*****

lepsie by to bolo rozdelit na 2 elementy. prvy bude defaultne vidiet, druhy bude schovany a bude sa ti zobrazovat/schovavat ako budes klikat na to citaj viac/menej

ked to chces ale silou mocou takto, tak napr tomu divu s classou 'obsah' si priraduj nejaku dalsiu classu, ktoru budes togglovat na onclick toho read more buttonu.

Kód: Vybrať všetko

.rozbaleny{
      height:auto;
}


$(".citajviac").click(function(){
   var $obsah = $(".obsah");
   var rozbalit = true;
   if($obsah.hasClass('rozbaleny')){
      rozbalit = false;
      $(this).html('Zobraziť viac');
   }else{
      $(this).html('Zobraziť menej');
   }
   $obsah.toggleClass('rozbaleny', rozbalit);
});

eNyCe

sorry ale nechapem velmi tomu togglovaniu s onclickom
skusal som uz nieco take co som nasiel na stackoverflow ale vykonavalo mi to stale len tu druhu funkciu

Kód: Vybrať všetko

$('a.more_less').toggle( 
    function() { 
        $('.list_cont').css('overflow','visible');
        $(this).html('Show less');
    }, 
    function() { 
        $('.list_cont').css('overflow','hidden');
        $(this).html('Show More');
    } 
);

(toto je len skopceny kod, svoj som mal upraveny pre svoju potrebu)

Rozdelit to na 2 elementy skor nebude mozne lebo ten div je generovany z Joomly

*****HERO*****

comu presne nechapes? ved som ti napisal komplet kod co ti staci, si ho tam vloz, pozri ako to funguje a uvidis.

tomu divu s obsahom sa pridava dalsia trieda 'rozbaleny' ako indikator toho, ci je rozbaleny alebo nie.

http://jsfiddle.net/YgZRG/

eNyCe

Ospravedlňujem sa, vtedy som si tam to tvoje jQuery nejak nevšimol

Funguje diky moc k+

*****HERO*****

v pohode, som ho tam doplnil trochu neskor

jQuery - zobrazit viac/menej

jQuery - zobrazit viac/menej

Re: jQuery - zobrazit viac/menej

Re: jQuery - zobrazit viac/menej

Re: jQuery - zobrazit viac/menej

Re: jQuery - zobrazit viac/menej

Re: jQuery - zobrazit viac/menej