[JS] Formulier verbergen lukt wel in IE, niet in Mozilla

[BratMokstrof]

Ik wil graag een soort faq-dingen maken waar je linkjes hebt en als je erop klikt, klapt de boel uit.
Dat lukt heel aardig, zowel in IE en Mozilla met de functie toggle:

code:

function toggle(targetId) {
    target = document.getElementById (targetId);
    if (target.style.display == "none") {
    target.style.display = "";
    } else {
    target.style.display = "none";
    }
}

Probleem is echter nu een browser-compatibileit: het werkt in Mozilla wel met tekst, maar niet met bijv. een form als dit:

code:

<P><A HREF ="javascript:toggle('cats')">- Verander categorieën indeling</A></P>
<P CLASS='antwoord' id='cats' style='display: none;'>
<FORM NAME = "category" ACTION = "decks.php" METHOD = "post">
<INPUT TYPE = "hidden" NAME = "category" VALUE = "96">
<INPUT TYPE = "checkbox" NAME = "d_5" VALUE = "0"> Bibliotheek<BR>
<INPUT TYPE = "checkbox" NAME = "d_7" VALUE = "0"> Vloten<BR>
<BR><INPUT TYPE = "submit" VALUE = "Maak openbaar">
</FORM>
</P>

In IE pakt hij dit overigens wel vrolijk, ...

Doe ik iets fout, onhandig of wil ik gewoon te veel?

[Bosmonster]

als je er nu eens display="block" van maakt ipv display=""...

Verder een paar kleine tips ivm leesbaarheid:

- gebruik geen capitalen voor je tags
- verwijder die spaties rond =

(topic hoort trouwens in W&G)

[ Voor 72% gewijzigd door Bosmonster op 09-02-2006 11:26 ]

[BratMokstrof]

Hej,

Thnx voor je snelle reply. Code veranderd in:

code:

function toggle(targetId) {
    target = document.getElementById (targetId);
    if (target.style.display == "none") {
    target.style.display = "block";
    } else {
    target.style.display = "none";
    }
}

Maar dat maakte geen verschil. Werkt nog altijd in IE, maar wederom niet in Mozilla.
Valt op trouwens dat het form echt "aan de kantlijn" v/d pagina staat. Lijkt dus wel of die <P> niet gepakt heeft? ...

Verder thnx voor de tips.
Zal eens kijken.

[ Voor 7% gewijzigd door BratMokstrof op 09-02-2006 11:30 ]

[b19a]

In plaats van je eigen javascript zou je deze library kunnen gebruiken: script.aculo.us. Gebruik dan bijvoorbeeld het Effect.Toggle(). Je link zou er dan zo uit kunnen zien:

HTML:

<a href="javascript:new Effect.Toggle('cats')">Blaatje</a>

Het is overigens niet toegestaan om een <form> binnen een <p> te maken. In de volgende versie van XHTML is het wel de bedoeling dat dit wordt toegestaan.

[Bosmonster]

Blijkbaar vind Firefox dat ook niet zo leuk, want zodra ik van die p een div maakt doet ie het wel

[BratMokstrof]

Bosmonster schreef op donderdag 09 februari 2006 @ 11:37:
Blijkbaar vind Firefox dat ook niet zo leuk, want zodra ik van die p een div maakt doet ie het wel

Wow... Wil je met me trouwen?

Dit werkt wel, ontzettend bedankt allemaal weer... En in 25 minuten...

[Janoz]

Voor de vorm zal ik dit topic iig nog even naar Webdesign & Graphics verplaatsen.

[crisp]

Het is logisch: een P-element mag geen andere blocklevel-elementen bevatten.
Daarbij is de closing-tag van een paragraph ook nog eens optioneel. Als een standards-compliant browser iets als dit voor z'n kiezen krijgt:

HTML:

<p>
  <form>
  </form>
</p>

dan zal hij bij het tegenkomen van het form-element de voorgaande paragraph impliciet afsluiten.
De extra close-tag wordt uiteindelijk ignored, dus je DOM-tree ziet er dan zo uit:

code:

<p></p>
<form></form>

IE doet het gewoon fout in dit geval....