[JavaScript][CSS] Pokazywanie/ukrywanie dwóch div'ów na raz, za pomocą jednego kliknięcia Opcje

[Ok-a]

Szukałam rozwiązania już w wielu miejscach, ale jeżeli jest tu gdzieś na forum i je przegapiłam, to byłabym wdzięczna za linka.


Chodzi o to, aby pokazać/ukryć dwa różne bloki tekstu, klikając na jeden odnośnik. Bloki te znajdują się w różnych częściach strony.

W tej chwili mam jakiś skrypt, który świetnie radzi sobie z rozwijaniem jednego bloku. Niestety o skryptach Javy nie wiem prawie nic, więc nie wiem, czy da się tam coś dopisać, żeby to działało też na ten drugi blok (i czy w ogóle coś takiego jest możliwe).

W HEAD to wygląda tak (mam nadzieję, że nie ma błędów - już nawet nie pamiętam skąd to skopiowałam...):

[JAVASCRIPT] pobierz, plaintext 
 <script type="text/javascript">
  function toggleLayer( blok1 )
  {
   var elem, vis;
   if( document.getElementById )
     elem = document.getElementById( blok1 );
   vis = elem.style;
   if(vis.display==''&&elem.offsetWidth!=undefined&&elem.offsetHeight!=undefined)
     vis.display = (elem.offsetWidth!=0&&elem.offsetHeight!=0)?'block':'none';
   vis.display = (vis.display==''||vis.display=='block')?'none':'block';
  }
 </script>
[JAVASCRIPT] pobierz, plaintext 

W BODY:

[HTML] pobierz, plaintext 
<a href="java script:toggleLayer('blok1')">więcej</a>
 
<div id="blok1">Ukryty tekst</div>
[HTML] pobierz, plaintext 

Naiwnie próbowałam tak samo nazwać te dwa bloki (IMG:style_emoticons/default/rolleyes.gif) ale nadal rozwijało tylko jeden.
Będę wdzięczna za jakąkolwiek pomoc (IMG:style_emoticons/default/smile.gif)

[CyberDuck_]

Masz tu, a oni niech sie kloca (IMG:style_emoticons/default/biggrin.gif)
Kiedys cos takiego potrzebowalem i zmienilem nieco kod dla
swoich potrzeb. Dzieki temu mozna :
1. schowac lub wyswietlic na przemian pojedyncze bloki
2. schowac lub wyswietlac kilka blokow na raz
3. schowac lub wyswietlic kilka blokow na przemian.
Znaczy jesli jeden jest widoczny to drugi schowany, itd ...

[PHP] pobierz, plaintext 
function ShowOrHide(d1, d2, d3, d4, d5, d6, d7, d8, d9, d10, d11, d12, d13, d14, d15, d16, d17, d18, d19, d20, d21, d22, d23, d24 , d25, d26, d27, d28, d29, d30) {
 
		if (d1 != '') DoDiv(d1);
      if (d2 != '') DoDiv(d2);
	   if (d3 != '') DoDiv(d3);
	   if (d4 != '') DoDiv(d4);
	   if (d5 != '') DoDiv(d5);
	   if (d6 != '') DoDiv(d6);
	   if (d7 != '') DoDiv(d7);
	   if (d8 != '') DoDiv(d8);
	   if (d9 != '') DoDiv(d9);
	   if (d10 != '') DoDiv(d10);
	   if (d11 != '') DoDiv(d11);
	   if (d12 != '') DoDiv(d12);
	   if (d13 != '') DoDiv(d13);
	   if (d14 != '') DoDiv(d14);
	   if (d15 != '') DoDiv(d15);
	   if (d16 != '') DoDiv(d16);
	   if (d17 != '') DoDiv(d17);
	   if (d18 != '') DoDiv(d18);
	   if (d19 != '') DoDiv(d19);
	   if (d20 != '') DoDiv(d20);
	   if (d21 != '') DoDiv(d21);
	   if (d22 != '') DoDiv(d22);
	   if (d23 != '') DoDiv(d23);
	   if (d24 != '') DoDiv(d24);
	   if (d25 != '') DoDiv(d25);
		if (d26 != '') DoDiv(d26);
		if (d27 != '') DoDiv(d27);
		if (d28 != '') DoDiv(d28);
		if (d29 != '') DoDiv(d29);
		if (d30 != '') DoDiv(d20);
 
        }
 
        function DoDiv(id) {
          var item = null;
          if (document.getElementById) {
                item = document.getElementById(id);
          } else if (document.all){
                item = document.all[id];
          } else if (document.layers){
                item = document.layers[id];
          }
          if (!item) {
          }
          else if (item.style) {
                if (item.style.display == "none"){ item.style.display = ""; }
                else {item.style.display = "none"; }
          }else{ item.visibility = "show"; }
}
 
function ShowOrHideAll(d1, d2, d3, d4, d5, d6, d7, d8, d9, d10, d11, d12, d13, d14, d15, d16, d17, d18, d19, d20, d21, d22, d23, d24 , d25, d26, d27, d28, d29, d30) {
 
		if (d1 != '') DoDivAll(d1);
      if (d2 != '') DoDivAll(d2);
	   if (d3 != '') DoDivAll(d3);
	   if (d4 != '') DoDivAll(d4);
	   if (d5 != '') DoDivAll(d5);
	   if (d6 != '') DoDivAll(d6);
	   if (d7 != '') DoDivAll(d7);
	   if (d8 != '') DoDivAll(d8);
	   if (d9 != '') DoDivAll(d9);
	   if (d10 != '') DoDivAll(d10);
	   if (d11 != '') DoDivAll(d11);
	   if (d12 != '') DoDivAll(d12);
	   if (d13 != '') DoDivAll(d13);
	   if (d14 != '') DoDivAll(d14);
	   if (d15 != '') DoDivAll(d15);
	   if (d16 != '') DoDivAll(d16);
	   if (d17 != '') DoDivAll(d17);
	   if (d18 != '') DoDivAll(d18);
	   if (d19 != '') DoDivAll(d19);
	   if (d20 != '') DoDivAll(d20);
	   if (d21 != '') DoDivAll(d21);
	   if (d22 != '') DoDivAll(d22);
	   if (d23 != '') DoDivAll(d23);
	   if (d24 != '') DoDivAll(d24);
	   if (d25 != '') DoDivAll(d25);
		if (d26 != '') DoDivAll(d26);
		if (d27 != '') DoDivAll(d27);
		if (d28 != '') DoDivAll(d28);
		if (d29 != '') DoDivAll(d29);
		if (d30 != '') DoDivAll(d30);
 
        }
 
        function DoDivAll(id) {
          var item = null;
          if (document.getElementById) {
                item = document.getElementById(id);
          } else if (document.all){
                item = document.all[id];
          } else if (document.layers){
                item = document.layers[id];
          }
          if (!item) {
          }
          else if (item.style) {
                if (item.style.display == "yess"){ item.style.display = ""; }
                else {item.style.display = "none"; }
          }else{ item.visibility = "show"; }
}
[PHP] pobierz, plaintext 

Mozna chowac najwiecej do 30 blokow. Dla wiekszosci stron to w zupelnosci wystarcza.
Teraz jak to wywolac ...
Oczywiscie kod umieszczasz w sekcji head np tak :

[PHP] pobierz, plaintext 
<script language="JavaScript" type="text/javascript" src="tablepokazschowaj.js"></script>
[PHP] pobierz, plaintext 

Teraz kawalki kodu :

[PHP] pobierz, plaintext 
<tr id="opis02" style="display:none">
[PHP] pobierz, plaintext 

Tak wlasnie oznaczasz sobie dowolna nazwa bloki. W tym wypadku jest to ramka tabeli, ale
moze to byc cala tabela lub div czy cokolwiek innego w czym da sie dopisac id i style.
Na jednej stronie mozesz umiescic jednoczesnie kilka takich blokow i czy maja
one zostac przy starcie strony uwidocznione czy nie decydujesz wpisem :

[PHP] pobierz, plaintext 
style="display:none" lub style="display:yess"
[PHP] pobierz, plaintext 

Wywolanie jest banalnie proste :

[PHP] pobierz, plaintext 
<a href="java script:ShowOrHide('opis02')">Lista folderów</a>
[PHP] pobierz, plaintext 

Jesli potrzebujesz jednoczesnie wyswietlic lub schowac lub zrobic to naprzemiennie
to podajesz wiecej parametrow :

[PHP] pobierz, plaintext 
<a href="java script:ShowOrHide('opis02','opis03','opisN')">Lista folderów</a>
[PHP] pobierz, plaintext 

Powodzonka

Ten post edytował CyberDuck_ 10.09.2009, 14:13:00