Div Boxen einblenden

Diese Seite verwendet Cookies. Durch die Nutzung unserer Seite erklären Sie sich damit einverstanden, dass wir Cookies setzen. Weitere Informationen

  • Hier ein kleines Beispiel von mir:

    Quellcode

    1. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    3. <html>
    5. <head>
    6. <meta http-equiv="content-type" content="text/html;charset=iso-8859-1">
    7. <title>Zeige Radio Buttons</title>
    8. <script type="text/javascript">
    9. function changed(value) {
    10. document.getElementById(value).style.display = "block";
    11. }
    12. </script>
    13. </head>
    15. <body bgcolor="#ffffff">
    16. <form action="irgendwas.html" method="post" name="form1" target="_self">
    17. <label>Zeige Feld 1</label><input name="hersteller" type="radio" onChange="changed(1);"><br>
    18. <label>Zeige Feld 2</label><input name="hersteller" type="radio" onChange="changed(2);"><br>
    19. <label>Zeige Feld 3</label><input name="hersteller" type="radio" onChange="changed(3);"><br>
    20. <br>
    21. <input id="1" type="text" name="textfieldName" size="24" value="Feld 1" style="display:none"><br>
    22. <input id="2" type="text" name="textfieldName" size="24" value="Feld 2" style="display:none"><br>
    23. <input id="3" type="text" name="textfieldName" size="24" value="Feld 3" style="display:none">
    24. </form>
    25. </body>
    27. </html>
    Alles anzeigen


    Ist natürlich nicht perfekt, da man die anderen nicht ausblendet, aber es demonstriert die Funktion.

    /edit

    mit dem Javascript Motion Tween kannst du deine divs dann schön einblenden, siehe hier
    jstween.blogspot.com/

    Grüße

  • HiHo,

    So, nu hab ich wieder etwas Zeit an meiner Privaten HP zu arbeiten.

    Wie verwende ich den nun deinen Code

    Folgendes habe ich

    Quellcode

    1. <script type="text/javascript" language="JavaScript">
    2. function toggleElementDisplay(id)
    3. {
    4. var element = document.getElementById(id);
    5. var css = element.style;
    6. if (css.display == 'block') {
    7. css.display = 'none';
    8. return;
    9. }
    10. css.display = 'block';
    11. }
    12. </script>
    Alles anzeigen


    Quellcode

    1. <div class="postbox_container">
    2. <fieldset>
    3. <div class="postbox_field">
    4. <ul class="tblul">
    5. <input type="radio" name="made_email" onclick="toggleElementDisplay('3');"> {$LANG.FRIEND_EMAIL_TEXT}<br>
    6. <input type="radio" name="self_email" onclick="toggleElementDisplay('2');"> {$LANG.SELF_EMAIL_TEXT}<br>
    7. </ul>
    8. </div>
    9. </fieldset>
    10. <fieldset>
    11. <div class="postbox_field" id="2" style="display: none;">
    12. <ul class="tblul">
    13. <li class="tblli"><b>{$LANG.MESSAGE}:</b></li>
    14. <li class="tblli">
    15. <textarea name="post_text" id="post_text" style="min-height:150px; min-width:700px;" ></textarea>
    16. </li>
    17. </ul>
    18. </div>
    19. </fieldset>
    20. </div>
    Alles anzeigen


    Klicke ich nun beide Auswahlfelder ein sind beide makiert und diese divbox <div class="postbox_field" id="2" style="display: none;"> ist eingeblendet.
    Wie muss ich vorgehen dass sich nicht beide aktivieren lassen und sich der Div nur öffnet wenn ich das letzte radio Feld anklicke?