Konradin Breyer: Text im Textfluss, der aufgeklappt / eingeklappt wird

Hallo!

Ich kenne mich leider nicht so super aus, muss ich ich im voraus schon einmal sagen.

Ich habe auf einer Seite mal gesehen, dass da ein Artikel über ein Thema stand und wenn man mehr darüber erfahren wollte, hat man einfach auf ein "+" gedrückt und dann klappte sich darunter der weitere Text aus und der Rest hat sich weiter nach unten verschoben. Dann hat man wieder auf das plus gedrückt und eingeklappt wars wieder.

Und genau das suche ich jetzt!

hab schon lange gestöbert in so Archiven, aber da gibt es furchtbar komplizierte Sachen - ich will ja nicht gleich ein Omen-Tree Menü dafür haben, sondern nur diese recht simpel klingende Sache.

Kann mir da jemand weiterhelfen?
Ich bin auch bereit, mitzudenken :-)

Gruß Konradin

Ps: In dieses Aufgeklappte sollen Bilder und Links in meinem Fall.

  1. Hallo Konradin,

    das sollte für den Anfang genügen und für das Mitdenken kannst Du sorgen, in dem Du Dir die einzelnen Methoden unter http://de.selfhtml.org/javascript/ ansiehst

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN"
           "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <title>TESTEN TESTEN TESTEN</title>
    <style type="text/css">
    #klapp {display:none}
    </style>
    <script type="text/javascript">
    function mach_was()
     {
     d=document.getElementById("klapp")
     d.style.display!="block" ? d.style.display="block" : d.style.display="none"
     }
    </script>
    </head>
    <body>
    <div>
    <b onClick="mach_was()"> + </b>
    </div>
    <div id="klapp">
    text<br>
    text<br>
    text<br>
    text<br>
    text<br>
    </div>
    </BODY>
    </html>

    Gruß aus Berlin!
    eddi

    --
    wahsaga (http://forum.de.selfhtml.org/archiv/2004/9/90932/#m546295)
    > vielleicht könnte man für heteros eine "strict"-DTD zu grunde legen [...oder...] eine darauf anwendbare CSS-eigenschaft 'sex'
    In dem Sinne: Ein -Hoch- auf die Liebe zwischen Menschen! ;)
  2. Hi,

    Und genau das suche ich jetzt!

    Oft behandelt, weiteres findest Du im Archiv (Suchbegriff: "display" unter der Rubrik JavaScript).

    Ist sehr einfach.

    Eine fertige Routine (die etwas komplexer ist, für die "weniger einfachen" Fälle): Coding: Darstellungswechsel - Un-/Sichtbare Elemente: Ein-/Ausklappen, Verstecken, Transparenz, Farbe

    Ich bin auch bereit, mitzudenken :-)

    Fein. :-)

    Ps: In dieses Aufgeklappte sollen Bilder und Links in meinem Fall.

    Egal! Ist normales HTML, das mittels CSS versteckt wird. Will man es variabel halten, sollte es allerdings nicht direkt mit CSS versteckt werden, sondern halt auch mit JavaScript (damit die Surfer ohne JS nicht wie'n Ochs' vorm Berge stehen ;-))

    Gruß, Cybaer

    --
    Hinweis an Fragesteller: Fremde haben ihre Freizeit geopfert, um Dir zu helfen. Helfe Du auch im Archiv Suchenden: Beende deinen Thread mit einem "Hat geholfen" oder "Hat nicht geholfen"!
  3. hallo ;o))

    schau mal auf http://weihnachtswunsch.com/rueckblick/
    dort verwende ich so ein script

    musst dir nur das javascript aus dem header rauskopiren und im text

    WICHTIG!! id's für die h3 tags damit man den Inhalt ansprechen
    kann!!!
    jeweils eine eins hinten dran z.b: id ="sc11" oder id="sc21" u.s.w.
    siehe fertiges script im heim anhang #;-> und unten

    <h3 id="sc11" onClick="expandcontent('sc1')" style="cursor:hand;
    cursor:pointer" class="h3">
                      mehr Info hier
                      </h3>
                    </td>
                    <td valign="top"><a href="/order/"><img
    src="/img/button_order2.gif" width="130" height="18" border="0"
    alt="Jetzt bestellen!"></a></td>
                  </tr>
                </table>
                <div id="sc1" class="switchcontent">

    liebe gruesse
    daniela

    1. Hi,

      style="cursor:hand; cursor:pointer"

      Erst (das offizielle) "pointer", danach (das proprietäre) "hand"!

      Und eigentlich auch nur in einer externen CSS-Datei, weil bei einem unbekannten Stil der Browser den kompletten Inline-Style nicht verarbeiten soll.

      Gruß, Cybaer

      --
      Hinweis an Fragesteller: Fremde haben ihre Freizeit geopfert, um Dir zu helfen. Helfe Du auch im Archiv Suchenden: Beende deinen Thread mit einem "Hat geholfen" oder "Hat nicht geholfen"!
    2. hallo ;o))

      schau mal auf http://weihnachtswunsch.com/rueckblick/
      dort verwende ich so ein script

      musst dir nur das javascript aus dem header rauskopiren und im text

      Super, danke!

      Aber brauch ich dann das ganze Javascript aus dem Header?

      also Get_cookie sicher nicht :)

      Ich versuch mich am besten mal selbst und lösch so nach und nach die Sachen raus...

      Also danke, Konradin

    3. Hallo!

      Ich habe mal die Statuszeile einblenden lassen und da heißt es, "Fehler auf der Seite"
      Zeile 104
      Objekt erwartet.

      Dieser ging weg, als ich folgendes Entfernte - dann ging aber auch nicht mehr das Script:

      function do_onload(){
      uniqueidn=window.location.pathname+"firsttimeload"
      getElementbyClass("switchcontent")
      if (enablepersist=="on" && typeof ccollect!="undefined"){
      document.cookie=(get_cookie(uniqueidn)=="")? uniqueidn+"=1" : uniqueidn+"=0"
      firsttimeload=(get_cookie(uniqueidn)==1)? 1 : 0 //check if this is 1st page load
      if (!firsttimeload)
      revivecontent()
      }
      }

      Was ist da los?

      Hoffentlich kann man mir helfen.

      Gruß Konradin

  4. Hallo, Konradin,

    hier findest Du unter "ExpandCollapse" ein weiteres Beispiel ...

    My Favorite Javascripts for Designers
    http://www.blakems.com/archives/000087.html

    Grüße,

    Sebastian