Div Boxen einblenden

This site uses cookies. By continuing to browse this site, you are agreeing to our Cookie Policy.

  • Hier ein kleines Beispiel von mir:

    Source Code

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


    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

    Source Code

    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>
    Display All


    Source Code

    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>
    Display All


    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?