Menue ein/ausklappen

Einklappen
X
 
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge

  • Menue ein/ausklappen

    Tach auch alle zusammen,

    ich suche nach einer möglichkeit beim klick auf die Überschrifft das dann sich die Artikel aufklappen und beim erneuten draufklicken, dann halt wieder verteckt werden....

    So sieht der aufbau aus:

    PHP-Code:
    <table border="0" width="100%" cellspacing="1" cellpadding="5">
         <
    tr>
           <
    td colspan="4" class="catbg2" height="18"><a href="http:///">Überschrift</a></td>
         </
    tr>
         
         <
    tr class="windowbg2">
           <
    td class="windowbg" width="6%" align="center" valign="top"><img src="XXX.gif" border="0" /></td>
           <
    td align="left"><a href="http:///" name="b30">Artikel</a><br>Beschreibung</td>
           <
    td class="smalltext" valign="middle" width="22%">Gschrieben am xx.xx.xxxx von xxx</td>
         </
    tr>
    </
    table
    Ist sowas mit php machbar oder muss ich da auf Javascript umsteigen !?
    Ihr habt da bestimmt eine Problemlösung für mich

    Grüße, der Vogel

    *edit*
    Huch, glaube der Thread fühlt sich im "HTML, JavaScript und CSS" Board besser
    Zuletzt geändert von Vogel; 05.06.2005, 16:41.
    The Spirit far beyond its Limit...

  • #2
    Hi,

    kommt drauf an.
    PHP ist eine Serverseitige sprache. Du müsstest deine Seite per Formular senden, dann ist das machbar.

    Einfach nur klicken und da erscheint oder verschwindet irgendwas is Javascript

    ODER mit css...

    <style type="text/css">
    a span { display: none; }
    a:focus span, a:active span { display: block; }
    </style>


    <a href="#">Ueberschrift
    <span>Artikelbeschreibung etc.</span>
    </a>
    gruss Chris

    [color=blue]Derjenige, der sagt: "Es geht nicht", soll den nicht stoeren, der's gerade tut."[/color]

    Kommentar


    • #3
      Und wie dann mit Javascript?
      Leide nicht mein fachgebiet, hab auch schon versucht zu googlen konnte aber nx brauchbares finden.... wüde mich freuen, wenn wer bsp. hat.


      grüße
      The Spirit far beyond its Limit...

      Kommentar


      • #4
        So oder so ähnlich

        <head>
        <script language = "javascript">
        function _switch(object) {
        if(document.all.article.style.display == "none"){
        document.all.article.style.display = '';
        }
        else{
        document.all.article.style.display = "none";
        }
        }
        </script>
        </head>

        <a href = "#" onClick = "_switch('article');">Ueberschrift</a><br />

        <div style = "display:none;" name = "article">
        <table>
        <tr>
        <td>Artikelfoto</td>
        <td>Artikelbeschreibung</td>
        </tr>
        </table>
        </div>
        gruss Chris

        [color=blue]Derjenige, der sagt: "Es geht nicht", soll den nicht stoeren, der's gerade tut."[/color]

        Kommentar


        • #5
          in der funktion selber muss aber object statt article stehen
          Es ist nicht deine Schuld, dass die Welt ist, wie sie ist,
          Es wär nur deine Schuld, wenn sie so bleibt

          Kommentar


          • #6
            PHP-Code:
            <head>
            <
            script language "javascript">
            function 
            _switch(object) {
            if(
            document.all.article.style.display == "none"){
            document.all.article.style.display '';
            }
            else{
            document.all.article.style.display "none";
            }
            }
            </
            script>
            </
            head>
            <
            body>

            <
            a href "index_test.php" onClick "_switch('object');">Ueberschrift</a><br />

            <
            div style "display:none;" name "article">
            <
            table>
            <
            tr>
            <
            td>Artikelfoto</td>
            <
            td>Artikelbeschreibung</td>
            </
            tr>
            </
            table>
            </
            div>
            </
            body

            Ich verstehe ansatzweise die Funktion
            (wenn article sind dislay=none soll '' werden...)
            nur will irgendwie nicht so, wie ich will...
            Als link der Überschrifft muss ich doch den index eingeben...? (also die seite auf der das script läuft...?)

            Und wo kommt jetzt object hin?
            Zuletzt geändert von Vogel; 05.06.2005, 18:49.
            The Spirit far beyond its Limit...

            Kommentar


            • #7
              1. machs mal so: (getestet mit IE6)
              Code:
              <html>
              <head>
              <title>JavaScript</title>
              </head>
              <body text="#00C0FF" bgcolor="#00007F" link="#FF0000" alink="#FF0000" vlink="#FF0000">
              <script language="javascript">
              function _switch(object) {
              if(document.getElementById(object).style.visibility == "hidden"){
              document.getElementById(object).style.visibility = "visible";
              }
              else{
              document.getElementById(object).style.visibility = "hidden";
              }
              }
              </script>
              </head>
              <body>
              <a href = "test.html" onClick = "_switch('article'); return false;">Ueberschrift</a><br />
              <div style="visibility:hidden;" id="article">
              <table>
              <tr>
              <td>Artikelfoto</td>
              <td>Artikelbeschreibung</td>
              </tr>
              </table>
              </div>
              </body>
              </html>
              2.
              OffTopic:
              Ich kenn mich nich mit CSS aus, was spricht denn gegen visibility und für display?
              Es ist nicht deine Schuld, dass die Welt ist, wie sie ist,
              Es wär nur deine Schuld, wenn sie so bleibt

              Kommentar


              • #8
                Rumo: wird u.a. mit alten netscapes nicht laufen.

                OffTopic:
                "... beyound ..."

                Kommentar


                • #9
                  Danke, der testlauf hat funktioneiert, mache das jetzt mal mit meiner Tabele fertig, sollte was nicht funzen, melde ich mich geren wieder

                  Original geschrieben von Rumo

                  2.
                  OffTopic:
                  Ich kenn mich nich mit CSS aus, was spricht denn gegen visibility und für display?
                  [/B]
                  Ich glaube zu wissen das "display:none;" nich einwandfrei mit Opera oder Firefox (einer von den beiden) funktioniert. da wird das "verteckte" trotzdem angezeigt....

                  Grüße


                  P.S.: ... beyond .....
                  The Spirit far beyond its Limit...

                  Kommentar


                  • #10
                    Danke nochmal funzt alles

                    Sorry für Doppelpost aber eine Frage bleibt noch,
                    undzwar, wie bekomme ich neben der Überschrift Icons hin die je nach menuestellung wechseln....?

                    Grüße
                    The Spirit far beyond its Limit...

                    Kommentar


                    • #11
                      Mhh.... (ich hätte ja meinen alten Beitrag gelöscht, kann aber nicht )

                      Funktioniert ja alles ganz gut, aber wenn ich dadrunter jetzt eine weitere Überschrift setze, passt sie sich nicht den situationen an....
                      d.h. Wenn überschrifft 1 eingeklappt ist, schiebt sich Überschrift 2 nich nach oben sondern das feld bleibt weiß...
                      Liegt ja daran, das der Teil ja nur versteckt wird.....
                      Was muss ich also machen, wenn die Überschriften aufrücken sollen !?

                      PHP-Code:
                      <div class="tborder">
                       <
                      table border="0" width="100%" cellspacing="1" cellpadding="5">
                           <
                      tr>
                             <
                      td colspan="4" class="catbg2" height="18"><a href "#" onClick "_switch('lightning'); return false;">Lightning</a></td>
                           </
                      tr><table border="0" width="100%" cellspacing="1" cellpadding="5" style="visibility:hidden;" id="lightning">
                             <
                      tr class="windowbg2">
                             <
                      td class="windowbg" width="6%" align="center" valign="top"><img src="XXX.gif" border="0" /></td>
                             <
                      td align="left"><a href="http://www.xxxxxxx/?site=" name="b30">GlowingFloppy Mod</a><br>Beschreibung</td>
                             <
                      td class="smalltext" valign="middle" width="22%">Gschrieben am xx.xx.xxxx von xxx</td>
                              </
                      tr>
                             <
                      tr class="windowbg2">
                             <
                      td class="windowbg" width="6%" align="center" valign="top"><img src="XXX.gif" border="0" /></td>
                             <
                      td align="left"><a href="http://www.technic3d.com/?site=" name="b30">GlowingMolex Mod</a><br>Beschreibung</td>
                                  <
                      td class="smalltext" valign="middle" width="22%">Gschrieben am xx.xx.xxxx von xxx</td>
                              </
                      tr></table>
                       </
                      table>
                      </
                      div>

                      <
                      div class="tborder">
                       <
                      table border="0" width="100%" cellspacing="1" cellpadding="5">
                           <
                      tr>
                             <
                      td colspan="4" class="catbg2" height="18"><a href "#" onClick "_switch('software'); return false;">Software</a></td>
                           </
                      tr>
                           <
                      table border="0" width="100%" cellspacing="1" cellpadding="5" style="visibility:hidden;" id="software">
                             <
                      tr class="windowbg2">
                             <
                      td class="windowbg" width="6%" align="center" valign="top"><img src="XXX.gif" border="0" /></td>
                             <
                      td align="left"><a href="http://www.xxxxxxx/?site=" name="b30">WinOEM Mod</a><br>Beschreibung</td>
                             <
                      td class="smalltext" valign="middle" width="22%">Gschrieben am xx.xx.xxxx von xxx</td>
                             </
                      tr>
                            </
                      table>
                       </
                      table>
                      </
                      div
                      The Spirit far beyond its Limit...

                      Kommentar


                      • #12
                        Jetzt kenn ich den Unterschied zwischen display und visibility:
                        Forme die Funktion so um:
                        Code:
                        <script language="javascript">
                        function _switch(object) {
                             if(document.getElementById(object).style.display == "none")
                                document.getElementById(object).style.display = "";
                             else
                                document.getElementById(object).style.display = "none";
                        }
                        </script>
                        (und eben die style eigenschaften entsprechend ändern)
                        dann müssts klappen!
                        Es ist nicht deine Schuld, dass die Welt ist, wie sie ist,
                        Es wär nur deine Schuld, wenn sie so bleibt

                        Kommentar


                        • #13
                          Special Thx. Funzt so wie soll und es passt sogar

                          Nur so nebenbei, gibt es die möglichkeit mit den Icons ?
                          Is nicht wichtig, währe aber nicht schlecht mit....

                          Grüße
                          The Spirit far beyond its Limit...

                          Kommentar


                          • #14
                            [Vorspiel: da keiner antwortet schreib ich einfach mal was, ohne zu verstehen was gemeint ist ]

                            mit was für icons?
                            also was meinst du damit?
                            Es ist nicht deine Schuld, dass die Welt ist, wie sie ist,
                            Es wär nur deine Schuld, wenn sie so bleibt

                            Kommentar


                            • #15
                              Ich hatte in irgendeiner Antwort vorher, angefragt, ob man am Anfang der Überschrift Icons setzten kann, die sich ändern, wenn das Menue aufgeklapt ist (wie bei Windows mit [+] für aufklappen und [-] zuklappen)

                              Grüße
                              The Spirit far beyond its Limit...

                              Kommentar

                              Lädt...
                              X