[JavaScript][PHP]Onclick - pojawianie się i znikanie div'a Opcje

[qqwwq]

Witam,

Bawię się z nową stroną, chciał bym aby jak najwięcej opcji było tam dostępnych bez odświeżania strony, a najłatwiej to chyba osiągnąć za pomocą onmouseover, onclick oraz display: none > display: block. Do pewnego czasu to działało, po najechaniu czy po kliknięciu na dany przycisk itp, pojawiał się kolejny div w którym można było coś wpisać czy coś zobaczyć, wykombinowałem sobie nawet przy niektórych takie fajne X, które ponownie nadawały danemu div'owi atrybut display: none. Jednakże teraz muszę zrobić coś takiego, że po kliknięciu na jakiś przycisk, pokazuje się dany div, po ponownym kliknięciu na ten sam przycisk - ten div znowu znika. Po prostu potrzebuję mieć jeden przycisk zarówno do wyświetlania i chowania jakiegoś diva - jednakże nie wiem jak to oskryptować.

Problem pewnie popularny, jednakże nie mogę nigdzie znaleźć poprawnego rozwiązania - google pewnie je zna, ale nie mogę trafić frazy dzięki której mi je poda.


Z góry dziękuję za pomoc, pozdrawiam.

[qqwwq]

Niestety ale nie mam pojęcia jak zrobić taką funkcję, która z danego diva o danym id pobierze wartość atrybutu display, jak bym to już miał to później z if'em dał bym sobie chyba radę. No ale wykorzystałem już drugi sposób z jquery. Bardzo fajna sprawa - tylko miał bym kilka pytań.

1. Poprzednio działało to na zasadzie dwóch div'ów - header_add oraz content_add. W tym pierwszym był w tle ustawiony obrazek plusa, oraz przy użyciu onmouseover i onmouseout, po najechaniu na tego diva podmienił się obrazek tła na 'aktywnego' plusa. Po zjechaniu tło z powrotem się zmieniało na normalne - chyba że się najechało na diva content_add który się pojawiał dzięki najechaniu na header_add. Pewnie nikt tego bełkotu nie zrozumie, dlatego pokażę kod jakim to osiągnąłem:

W obu divach był taki kod:

[PHP] pobierz, plaintext 
 onmouseover="add_on()" onmouseout="add_off()"
[PHP] pobierz, plaintext 

No i w pliku js funkcje:

[PHP] pobierz, plaintext 
function add_on() {document.getElementById("header_add").style.background='url(img/plus_active.png) left no-repeat';document.getElementById('content_add').style.display='block';}
function add_off() {document.getElementById("header_add").style.background='url(img/plus.png) left no-repeat';document.getElementById('content_add').style.display='none';}
[PHP] pobierz, plaintext 

Teraz moje pierwsze pytanie, czy, i jak, mogę połączyć powyższe funkcje, powyższą funkcjonalność, z już przerobionym kodem na:

[PHP] pobierz, plaintext 
<script>
$(document).ready(function() {
	$("#header_add").click(function () {
	$('#content_add').slideToggle('normal');
	});
});
</script>
[PHP] pobierz, plaintext 

Próbowałem te kody wciskać w różne miejsca, ale jedynie co mi się udało, to przy kliknięciu dodać także tło 'aktywnego' plusa ( no i oczywiście wysuwanie/chowanie div'a - to działa ), tylko że niezbyt rozumiem działanie tych funkcji z jquery, dlatego też nie mam pojęcia co zrobić aby na kliknięcie powrotne, wraz ze zwijaniem, tło także wracało do zwykłej postaci.

2. Z tym jquery i rozwijaniem to bardzo fajny efekt, jak się domyślam to zasługa funkcji slideToggle. Czy oprócz niej w tym pliku są jeszcze jakieś inne metody pojawiania się czy rozwijania różnych rzeczy?

Częściowo sobie poradziłem dzięki temu wpisowi, dokładnie w taki sposób:

[PHP] pobierz, plaintext 
$(document).ready(
	function() {
		$("#header_add").click(
			function () {
				$('#content_add').slideToggle();
				$("#header_add").toggle(
					function() { document.getElementById("header_add").style.background='url(img/plus_active.png) left no-repeat'; }, 
					function() { document.getElementById("header_add").style.background='url(img/plus.png) left no-repeat'; }
				);
			}
		);
 
	}
);
[PHP] pobierz, plaintext 

Jednakże 'prawie' to działa. Efekt jest dokładnie taki, że klikając w div'a header_add - div content_add się zwija i rozwija na przemian.
Natomiast dalej tak jak miało być, czyli również na przemian zmiana tła z aktywnym i nie aktywnym, działa - ale z częstotliwością chyba zmniejszoną o połowę.
To znaczy, po kliknięciu dwa razy w div'a header_add, zmienia się w nim tło, po kolejnych dwóch kliknięciach znowu zmienia się w nim tło, tylko że podczas jednego 'okresu' zmiany tła, div content_add zdąży się już wysunąć i schować dwa razy ... próbowałem już rozdzielać czy inaczej łączyć te funkcje, ale w większości przypadków to nie działało, albo działało ale nadal nie tak jak powinno.