Forum PHP.pl > [JavaScript][HTML]Rozwijane/chowane divy

Pomoc - Szukaj - Użytkownicy - Kalendarz

Pełna wersja: [JavaScript][HTML]Rozwijane/chowane divy

Skicek

15.10.2011, 20:55:04

Witam,
mam problem z chowaniem diva gdy drugi sie rozwija. Mianowicie uzywam biblioteki jquerty i funkcji slidetoggle

CODE

$(document).ready(function() {
$('.chowaj').click(function () {
var xyz = $(this).attr('href');
$(xyz).slideToggle('normal');
return false;
});
});

CODE

<a href="#id1" class="chowaj">111</a><a href="#id2" class="chowaj">2222</a><a href="#id3" class="chowaj">333</a><a href="#id4" class="chowaj">444</a>
<div id="id1" style="display:none;">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>

<div id="id2" style="display:none;">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>

<div id="id3" style="display:none;">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>

<div id="id3" style="display:none;">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>

a chodzi mi o cos podobnego do tego http://pliki.vivee.info/demo/slide/4.html tylko z tym ze nie typu akordeonowego tylko Guziki jeden obok drugiego a pod nimi wyswietla sie zawartosc ich i chowa gdy wcisnie sie nastepny (oczywiscie zawartosc nastepnego sie pojawia)

konrados

15.10.2011, 21:06:07

A coś takiego: http://jqueryui.com/demos/tabs/ ?
Tyle, że 'tabs' (czyli te "guziki") umieścisz sobie na dole.

Skicek

15.10.2011, 21:09:58

"guziki" sa latwiejsze do zrobienia jesli nie znajde rozwiazania jak zrobic "rozwijane" to to bede musial uzyc tabsow.

Choc przyznam ze bardziej interesuje mnie slidetoggle tylko z opcja by poprzednik sie chowal.

konrados

15.10.2011, 21:15:32

To może spróbuj tak:

[HTML] pobierz, plaintext 
<div id="id1" style="display:none;" class = 'tab_content'>
[HTML] pobierz, plaintext

Jak widzisz, dołożyłem klasę 'tab_content' i teraz:

[HTML] pobierz, plaintext 
$('.chowaj').click(function () {
$('.tab_content').hide();//ukrywamy wstępnie wszystkie
var xyz = $(this).attr('href'); 
$(xyz).slideToggle('normal'); 
return false;
});
[HTML] pobierz, plaintext

Skicek

15.10.2011, 21:23:47

nie zadziałało, niestety

edit:

tzn zadzialalo ale dziala strasznie topornie... w sensie rozwija sie plytnie a chowa sie w ulamek sekundy

edit 2:

dobra po prawilem juz po swojemu czyli wystarczylo dac argument czasowy "hide'owi" i dziala. Moze nie wyglada to super zajebiscie ale przelatujace literki tez sa super ;D

thx konrados

konrados

15.10.2011, 21:31:51

Ależ proszę.
Możesz też się bawić w funk. slideUp etc.

gosc

15.10.2011, 21:32:23

tak jak napisal konrados dodaj wszystkim divom klasę class=tab_content

[HTML] pobierz, plaintext 
$('.chowaj').click(function () {
    $('.tab_content').slideUp();
    var xyz = $(this).attr('href'); 
    $(xyz).slideDown('normal'); 
    return false;
});
[HTML] pobierz, plaintext

To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.