[JavaScript][HTML]Rozwijane/chowane divy Opcje

[Skicek]

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]

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

[Skicek]

"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]

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]

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

Ten post edytował Skicek 15.10.2011, 21:30:14

[konrados]

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

[-gosc-]

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