Mam formularz podzielony na sekcje za pomocą fieldset. Jak za pomocą JS sprawić, by po kliknięciu w LEGENDĘ danej sekcji tag DL znajdujący się wewnątrz zmieniał styl na display: none; i odpowiednio block w przypadku, gdy już był ukryty?

Chodzi mi o uniwersalny skrypt bez koneiczności nadawania ID każdemu DL i FIELDSET.

[HTML] pobierz, plaintext 
<fieldset><dl>TU SĄ POLA FORMULARZY</dl></fieldset>
[HTML] pobierz, plaintext 

Klikamy w fieldset i dl znika. Klikamy ponownie i DL pojawia się.

Może to pomoże:

http://ferrante.pl/2007/02/27/praktyczne-w...o-javascript-3/

Zauważ, że mowa tu o identyfiaktorach, a ja wyraźnie napisałem: "Chodzi mi o uniwersalny skrypt bez koneiczności nadawania ID każdemu DL i FIELDSET."

Wiem, że chodzi o skrypty związane z getElementByTagName, ale nie bardzo potrfię to co wiem wykorzystać w praktyce.

Łopatologicznie powinno to funkcjonować tak:

Podajemy w funkcji id formularza. Funkcja pobiera z tego formularza wszystkie tagi FIELDSET, a następnie dodaje do nich zdarzenie ONCLICK, które warunkuje pokazanie / ukrycie elementów DL znajdujących się w fieldset. chociaż to też nie do końca, bo zdarzenie onclick powinno dotyczyć legendy w fieldset.

Zrobiłem coś takiego:

[HTML] pobierz, plaintext 
<form action="" method="post" id="formularz">
   <fieldset>
      <legend>Część pierwsza</legend>
      <dl>
         <dt>Pierwsze pole</dt>
         <dd><input type="text" name="pierwsze_pole" alue="" /></dd>
         <dt>Drugie pole</dt>
         <dd><input type="text" name="drugie_pole" alue="" /></dd>
      </dl>
   </fieldset>
   <fieldset>
      <legend>Część druga</legend>
      <dl>
         <dt>Trzecie pole</dt>
         <dd><input type="text" name="trzecie_pole" alue="" /></dd>
         <dt>Czwarte pole</dt>
         <dd><input type="text" name="czwarte_pole" alue="" /></dd>
      </dl>
   </fieldset>
</form>
 
<script type="text/javascript">
 
   function aktywacja_ukrywania_formularza ( id )
   {
      this.id = id;
 
      var tagi_fieldset = document.getElementById(id).getElementsByTagName('fieldset');
 
      for (var n = 0; n < tagi_fieldset.length; ++n)
      {
         var tagi_dl = tagi_fieldset[n].getElementsByTagName('dl');
         var tag_legend = tagi_fieldset[n].getElementsByTagName('legend');
 
         tag_legend[0].onclick = function () { for (var m = 0; m < tagi_dl.length; ++m) { if ( tagi_dl[m].style.display == 'none' ) { tagi_dl[m].style.display = ''; } else { tagi_dl[m].style.display = 'none'; } } };
      }
   }
 
   aktywacja_ukrywania_formularza ( 'formularz' );
 
</script>
[HTML] pobierz, plaintext 

Problem jednak polega na tym, że ukrywane jest tylko ostatnie dl, ponieważ do funkcji w onclick wędrują zmienne nadpisywane w kolejncyh krokach for.

Co z tym zrobić?

ja zrobiłem w jQuery coś takiego: klikasz raz znika, klikasz 2x pojawia się:

[HTML] pobierz, plaintext 
<script type="text/javascript" src="jquery.js"></script>
 
<script type="text/javascript">
$(document).ready(function()
{
	$('fieldset').click(function () 
	{
		$(this).children('dl').hide();
		return true;
	});
	$('fieldset').dblclick(function () 
	{
		$(this).children('dl').show();
		return true;
	});
});
 
</script>
 
<form action="" method="get">
<fieldset>
	<legend>Część pierwsza</legend>
	<dl>
		<dt>Pierwsze pole</dt>
		<dd><input type="text" name="pierwsze_pole" value="" /></dd>
		<dt>Drugie pole</dt>
		<dd><input type="text" name="drugie_pole" value="" /></dd>
	</dl>
</fieldset>
<fieldset>
	<legend>Część druga</legend>
	<dl>
		<dt>Trzecie pole</dt>
		<dd><input type="text" name="trzecie_pole" value="" /></dd>
		<dt>Czwarte pole</dt>
		<dd><input type="text" name="czwarte_pole" value="" /></dd>
	</dl>
</fieldset>
</form>
[HTML] pobierz, plaintext 

No to już jest blisko tylko że ja chciałbym, by klikało się w legend. Zauważ, że na FF możesz kliknąc w pole fomularza które jest w fieldset i fieldset znika.

Poza tym chciałbym, by nie trzeba było kliakć dwa razy by pokazać pola.

Wypłodziłem coś takiego i działa :- )

[PHP] pobierz, plaintext 
<?php
<script type="text/javascript">
 
   $(document).ready(function()
   {
      $('fieldset').children('legend').click(function ()
      {
         if ( $(this).parent().children('dl').css("display") == 'none' )
         {
            $(this).parent().children('dl').show();
         }
         else
         {
            $(this).parent().children('dl').hide();
         }
         return true;
      });
   });
 
 </script>
?>
[PHP] pobierz, plaintext 

a ja jeszcze zoptymalizowałem (bo zapomniałem o tej funkcji :| )

[HTML] pobierz, plaintext 
<script type="text/javascript">
$(document).ready(function()
{
	$('legend').click(function ()
	{
		$(this).next().toggle();
		return true;
	});	
});
</script>
[HTML] pobierz, plaintext