Markus: Plus-Minus Button für zusätzliche Info

Hallo!

Ich würde gerne eine simple Lösung für folgende Sache finden:

Ich würde gerne auf meiner Homepage zusätliche Information zu einem Titel im Seiteninhalt (nicht in der Navigation) "anhängen".

Ist etwas schwer zu erklären... ;)

Was ich meine, soll dann so aussehen:

Die Überschrift ist z.B. "Dies ist der Titel".

vor der Überschrift wäre dann ein "+"

also:

  • "Dies ist der Titel"

Wenn nun der Besucher auf das Plus klickt:

  • "Dies ist der Titel"
       Dies wäre dann ein erläuternder Text, der eingeblendet wird und
       Inhalt passend zur Überschrift enthält.

Wenn man dann aufs minus klickt, "verschwindet" der erläuternde Text wieder.

Gibt es dafür ein fertiges Skript oder HTML Code zum Anpassen???

Vielen Dank!!!!!

  1. Hallo,

    rein in HTML würde ich das in 2 Seiten splitten, sofern du nur HTML verwenden willst.

    • "Dies ist der Titel"

    Das wäre die erste Seite, z.B. testseite_zu.html

    • "Dies ist der Titel"
         Dies wäre dann ein erläuternder Text, der eingeblendet wird und
         Inhalt passend zur Überschrift enthält.

    Das wäre die zweite Seite, z.B. testseite_auf.html

    Das + und - sind dann halt Verweise zu der jeweils anderen Seite.

    Ansonsten würde ich tippen, dass man, wenn man das alles in einer Seite haben möchte, JavaScript benutzen sollte.
    Oder gibt es da z.B. auch eine CSS / HTML-Kombinationslösung?

    Liebe Grüße,
    Nadja

    --
    system.exit(0);
  2. vor der Überschrift wäre dann ein "+"

    also:

    • "Dies ist der Titel"

    Wenn nun der Besucher auf das Plus klickt:

    • "Dies ist der Titel"
         Dies wäre dann ein erläuternder Text, der eingeblendet wird und
         Inhalt passend zur Überschrift enthält.

    Hier ein Beispiel wo es für Navigationselemente in Listen verwendet wird. Kannst du natürlich auf jedes andere Element auch anwenden:

    http://www.tutorio.com/tutorial/javascript-expanding-menu
    bzw.
    http://www.tutorio.com/media/css-tutorials/collapse.html

    Gruss
    Mario

    1. Hallo,

      http://www.tutorio.com/media/css-tutorials/collapse.html

      Ja, sowas meinte ich mit "HTML-CSS-Kombination" ;)

      Liebe Grüße,
      Nadja

      --
      system.exit(0);
    2. "http://www.tutorio.com/tutorial/javascript-expanding-menu"

      Genau so etwas habe ich gesucht!!! VIELEN VIELEN DANK!!!

      Viele Grüsse!

      Markus

      vor der Überschrift wäre dann ein "+"

      also:

      • "Dies ist der Titel"

      Wenn nun der Besucher auf das Plus klickt:

      • "Dies ist der Titel"
           Dies wäre dann ein erläuternder Text, der eingeblendet wird und
           Inhalt passend zur Überschrift enthält.

      Hier ein Beispiel wo es für Navigationselemente in Listen verwendet wird. Kannst du natürlich auf jedes andere Element auch anwenden:

      http://www.tutorio.com/tutorial/javascript-expanding-menu
      bzw.
      http://www.tutorio.com/media/css-tutorials/collapse.html

      Gruss
      Mario

      1. Ich möche den Java-Code von hier:
        http://www.tutorio.com/tutorial/javascript-expanding-menu
        übernehmen...

        ABER... Ich bin jetzt am "basteln" und versteh nicht, wo ich den Code unterbringe... Komme da irgendwie nicht hinter...

        Läuft das über einen stylesheet?? Was sind die Linklisten... *grübel*

        "http://www.tutorio.com/tutorial/javascript-expanding-menu"

        Genau so etwas habe ich gesucht!!! VIELEN VIELEN DANK!!!

        Viele Grüsse!

        Markus

        vor der Überschrift wäre dann ein "+"

        also:

        • "Dies ist der Titel"

        Wenn nun der Besucher auf das Plus klickt:

        • "Dies ist der Titel"
             Dies wäre dann ein erläuternder Text, der eingeblendet wird und
             Inhalt passend zur Überschrift enthält.

        Hier ein Beispiel wo es für Navigationselemente in Listen verwendet wird. Kannst du natürlich auf jedes andere Element auch anwenden:

        http://www.tutorio.com/tutorial/javascript-expanding-menu
        bzw.
        http://www.tutorio.com/media/css-tutorials/collapse.html

        Gruss
        Mario

        1. Ich habs! Sorry, war voll auf dem falschen Dampfer...

          Danke nochmal!

          Ich möche den Java-Code von hier:
          http://www.tutorio.com/tutorial/javascript-expanding-menu
          übernehmen...

          ABER... Ich bin jetzt am "basteln" und versteh nicht, wo ich den Code unterbringe... Komme da irgendwie nicht hinter...

          Läuft das über einen stylesheet?? Was sind die Linklisten... *grübel*

          "http://www.tutorio.com/tutorial/javascript-expanding-menu"

          Genau so etwas habe ich gesucht!!! VIELEN VIELEN DANK!!!

          Viele Grüsse!

          Markus

          vor der Überschrift wäre dann ein "+"

          also:

          • "Dies ist der Titel"

          Wenn nun der Besucher auf das Plus klickt:

          • "Dies ist der Titel"
               Dies wäre dann ein erläuternder Text, der eingeblendet wird und
               Inhalt passend zur Überschrift enthält.

          Hier ein Beispiel wo es für Navigationselemente in Listen verwendet wird. Kannst du natürlich auf jedes andere Element auch anwenden:

          http://www.tutorio.com/tutorial/javascript-expanding-menu
          bzw.
          http://www.tutorio.com/media/css-tutorials/collapse.html

          Gruss
          Mario

  3. Tag Markus.

    Ich würde gerne auf meiner Homepage zusätliche Information zu einem Titel im Seiteninhalt (nicht in der Navigation) "anhängen".

    Dafür benötigst du etwas Javascript. Die Plus- und Minusbuttons kannst du als Grafiken einbinden und versiehst sie mit dem Eventhandler onclick, mit dessen Hilfe du eine Funktion aufrufst, welche die CSS-Eigenschaft display ändert. Dabei ist dir das style-Objekt behilflich.

    Siechfred

    --
    Früh übt sich ... (74kB)
    Der schwierigste Blick ist immer der über den Tellerrand -- man glaubt gar nicht, wie hoch so ein Tellerrand sein kann.
  4. puts "Hallo " + gets.chomp + "."

    ?> Markus
    => Hallo Markus.

    • "Dies ist der Titel"

    Wenn nun der Besucher auf das Plus klickt:

    • "Dies ist der Titel"
         Dies wäre dann ein erläuternder Text, der eingeblendet wird und
         Inhalt passend zur Überschrift enthält.

    Wenn man dann aufs minus klickt, "verschwindet" der erläuternde Text wieder.

    Muss es unbedingt ein Klick sein? Wenn nicht, dann genügt hier eine Infobox.

    Ansonsten bestünde die Möglichkeit, dass du zum Seitenbeginn alle nicht ständig sichtbaren Elemente mittels style-Objekt ausblendest und sie beim Klick auf den Begriff jeweils einblendest.

    Einen schönen Freitag noch.

    Gruß, Ashura

    --
    Selfcode: sh:( fo:) ch:? rl:( br:^ n4:& ie:{ mo:) va:) de:> zu:) fl:( ss:| ls:[ js:|
    30 Days to becoming an Opera8 Lover -- Opera 8.02 mit Bittorent-Unterstützung
    Meine Browser: Opera 8.01, der Vorreiter | Firefox 1.0.4 | Lynx 2.8.3 | Netscape 4.7 | IE 6.0
    [Deshalb frei! - Argumente pro freie Software]
  5. Die Erläuterung zu einem Titel ist in der Regel der erste Absatz, der gleichzeitig Einleitung und kurze Zusammenfassung ist. Nur mal so am Rande.

    1. puts "Hallo " + gets.chomp + "."

      ?> sschumann
      => Hallo sschumann.

      Die Erläuterung zu einem Titel ist in der Regel der erste Absatz, der gleichzeitig Einleitung und kurze Zusammenfassung ist. Nur mal so am Rande.

      Ist es dagegen ein Begriff, der erläutert wird, bietet sich eine Definitionsliste an.

      Einen schönen Freitag noch.

      Gruß, Ashura

      --
      Selfcode: sh:( fo:) ch:? rl:( br:^ n4:& ie:{ mo:) va:) de:> zu:) fl:( ss:| ls:[ js:|
      30 Days to becoming an Opera8 Lover -- Opera 8.02 mit Bittorent-Unterstützung
      Meine Browser: Opera 8.01, der Vorreiter | Firefox 1.0.4 | Lynx 2.8.3 | Netscape 4.7 | IE 6.0
      [Deshalb frei! - Argumente pro freie Software]