[JavaScript]jQuery- pokazywanie danego diva Opcje

[Oczko21]

Witam,
Natknąłem się niestety znowu na problem i nie daje rady rozwiązać go sam :/
Mam takie 3 div, wszystkie są identyczne, chciałbym aby po kliknięciu w jeden z nich, pozostałe dwa chowały się, a ten który został klikniety wysunął się.
Wygląda to mniej więcej tak:

[HTML] pobierz, plaintext 
		<div id="right-boxes">
 
                	<div id="box">
				<div id="header">
			        </div>
                               <div id="box-text">
                               </div>
                       </div>
 
                	<div id="box">
				<div id="header">
			        </div>
                               <div id="box-text">
                               </div>
                       </div>
 
                	<div id="box">
				<div id="header">
			        </div>
                               <div id="box-text">
                               </div>
                       </div>
 
	        </div>
[HTML] pobierz, plaintext 

I tutaj moje wypociny z jQuery:

[HTML] pobierz, plaintext 
$(function(){
 
	$("#right-boxes").toggle(function(){
 
		$("#box #box-text").animate({width: "0px"}, 750 );
	},
	function(){	
		$("#box #box-text").animate({width: "200px"}, 750 );
	});
})
[HTML] pobierz, plaintext 

Jak można się domyślić, wszystkie 3 boxy sie chowają, a po ponownym kliknięciu wysuwają. Prosiłbym o pomoc, nie wiem czy do tego co chce osiągnąć toggle() jest dobrym rozwiązaniem? Druga sprawa w jaki sposób moge przekazać w jQuery dany element, tzn żeby ten klikniety div się wysunął, a nie jakiś inny, mająć na uwadze to iż wszystkie mają takie same ID i strukture.
Z góry dziękuję za jakieś sugestie.

[ayeo]

[HTML] pobierz, plaintext 
<div id="right-boxes">
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
</div>
 
 
<script>
    $(".box").click(function()
    {             
        $(".box").animate( { width: "0px" },  { queue: false, duration: 750 } );
        $(this).animate( { width: "200px" },  { queue: false, duration: 750 } );        
    });
</script>  
[HTML] pobierz, plaintext 

Tu masz paczkę jak coś

http://q.i-systems.pl/file/32445aa2.zip

Ten post edytował ayeo 15.03.2012, 18:26:11

[Oczko21]

Dzięki Wielkie!
Działa jak należy, tylko pojawiały się teraz inne problemy:
1. Wtyczk w FireFoxie wyrzuca mi taki błąd

((f.event.special[r.origTyoe] ||{}).handle || r.handler).apply is not a function

błąd pojawia w pliku z biblioteką jQuery, mimo iż nic tam nie majstrowałem

2. Teraz ten bardziej poważny błąd:
HTML:

[HTML] pobierz, plaintext 
<div id="right-boxes">
     <div class="box">
          <p>Tekst 1</p>
     </div>
     <div class="box">
          <p>Tekst 2</p>
     </div>
     <div class="box">
          <p>Tekst 3</p>
     </div>
</div>
[HTML] pobierz, plaintext 

W pliku CSS przy p mam ustawione display:none. Chciałbym aby tekst pojawiał się tylko w tym boxie który jest aktywny, więc zrobiłem to tak:
java script:

[HTML] pobierz, plaintext 
$(".box").click(function()
{
$(".box").animate( { width: "0px" }, { queue: false, duration: 750 } );
$(this).animate( { width: "200px" }, { queue: false, duration: 750 } );
$(this).css("display", "block");
});
[HTML] pobierz, plaintext 

I nie bardzo chce to zadziałać, próbowałem to ugryźć też tak:

[HTML] pobierz, plaintext 
$(".box").click(function()
{
$(".box").animate( { width: "0px" }, { queue: false, duration: 750 } );
$(this).animate( { width: "200px" }, { queue: false, duration: 750 }, $(this).css("display", "block"));
});
[HTML] pobierz, plaintext 

Ale dalej brak rządanego efektu.
Mogę też prosić o pomoc w tym?