Text ein/ausblenden

Vorschau:

Ich liebe Jimdo Einblenden

Um auch soetwas zu bekommen musst du folgenden Code kopieren und in ein "Widget / HTML" Modul einfügen, und anschließend deinen Text eingeben. 

  

<script type="text/javascript">
//<![CDATA[
function swap(openlink,closelink, linkid, dataid)
{
if( document.getElementById(dataid).style.display == 'none')
{
document.getElementById(dataid).style.display='inline';
document.getElementById(linkid).firstChild.nodeValue=closelink;
} else
{
document.getElementById(dataid).style.display='none';
document.getElementById(linkid).firstChild.nodeValue=openlink;
}
}
//]]>
</script>
<table class="tab24" align="center" border="0" cellpadding="0" cellspacing="0" width="80%">
    <tr bgcolor="#FFCC00">
        <td width="33%" height="35" style="padding-left:15px; padding-right:15px;">
        </td>
        <td width="34%" align="center">
            Ich liebe Jimdo        </td>
        <td align="right" width="33%" style="padding-left:15px; padding-right:15px;">
            <a href="#swap" onclick="javascript:swap('Einblenden','Ausblenden', 'swaplink', 'hideme')" id="swaplink" onfocus="this.blur()" name="swaplink">Einblenden</a>
        </td>
    </tr>

    <tr style=" text-align: justify; font-size: 16px; font-weight: normal; background-color: rgb(255, 228, 122);">
        <td colspan="3" style="padding-left:15px; padding-right:15px;">
            <div id="hideme" style="display:none">
                <br />

                <div align="center">
                    <span class="title24">Überschrift</span>
                </div>

                <p>
                    1.) Dieser Text ist ein Blindtext. Blindtext ergibt keinen Sinn. Blindtext steht dort, wo nachher der richtige Text hingehört. Blindtext ergibt nämlich keinen Sinn. Blindtext wird
                    fürs Layout genutzt - um dem Betrachter den Platz für den Text anzuzeigen. Bitte lesen Sie nicht weiter. Blindtext ergibt keinen Sinn. Blindtext ist ein Platzhalter. Irgendwann
                    wird der Blindtext dann durch richtigen Text ersetzt - im Moment steht hier aber nur Blindtext. Sie wissen es ja schon, Blindtext ergibt keinen Sinn. Weiterlesen ist also
                    zwecklos.
                </p>

                <p>
                    2.) Sicherlich können Sie ihre Zeit viel besser nutzen. Blindtext ergibt keinen Sinn. Sie könnten in dieser Zeit auch etwas sinnvolles tun. Dies ist ein Blindtext. Bitte lesen sie
                    wirklich nicht weiter. Blindtext ist ein vorläufiger Platzhalter für den eigentlichen Text. Sie lesen ja immer noch. Sie wollen mich nicht verstehen. Es ist aber wirklich dumm
                    Blindtest zu lesen. Fast so dumm wie Blindtext zu schreiben. Blindtext ergibt keinen Sinn. Jegliches Weiterlesen ist reinste Zeitverschwendung.
                </p>

                <p>
                    3.) Weiterlesen ist also zwecklos. Sicherlich können Sie ihre Zeit viel besser nutzen. Blindtext ergibt keinen Sinn. Sie könnten in dieser Zeit auch etwas sinnvolles tun. Dies ist
                    ein Blindtext. Bitte lesen sie wirklich nicht weiter.
                </p>
            </div>
<!--Script by ichliebe.jimdo.com-->        </td>
    </tr>
</table>

Kommentar schreiben

Kommentare: 18
  • #1

    ohgfantasy (Sonntag, 08 April 2012 14:52)

    tolles Script.

    ich hab mir das ein bisschen modifiziert (bin aber trotzdem nur ein Laie) und es funktioniert auch soweit ganz gut.

    Aber wie kriege ich es hin, dass ich mehrere von diesen Feldern untereinander einbaue?

    wenn ich das gesamte script also kopiere und in ein neues HTML-modul einsetze, wird durch den link immer nur das erste modul ausgeklappt.

    Vlt. fällt dir da was ein.

    Bis dahin
    OHGFantasy

  • #2

    perso24 (Samstag, 08 September 2012 17:25)

    ...das würde mich auch interessieren! Gibt es da eine Möglichkeit?! Ich möchte auch 2 (bzw. mehrere) dieser ausklappbaren Felder untereinander einbauen.

  • #3

    action-r-crash (Sonntag, 09 September 2012 23:39)

    VIELEN DANK EY
    ICH HAB STUNDEN DANACH GESUCHT WEIL JIMDO ALLES ANDERS HAT ALS BEI ANDEREN HOMEPAGES!!

  • #4

    action-r-crash (Montag, 10 September 2012 06:16)

    wie kann ich die schriftgröße der schrift auf dem spoieler ändern?

    also dort wo steht

    ich liebe jimdo

  • #5

    Heide Thea Sibley (Sonntag, 07 Oktober 2012 20:11)

    Funktioniert gut! Habe dazu zwei Fragen:

    1.) Wie kann ich die Hintergrundfarbe ändern?
    In diesem Beispiel ist sie gelb und ich sehe im HTML, dass dafür die Code: background-color: rgb(255, 228, 122) ist.
    Gibt es da zu jedem Hintergrundfarbton eine Code? Wenn ja, wo kann ich die finden?
    Noch besser: ist es möglich den schon vorgegebenen Hintergrund durchscheinen zu lassen?

    2.) Wenn ich "ausblenden" am ENDE DES TEXTES setzen möchte (in ihrem Beispiel bleibt er oben an der selben Stelle wie "einblenden", wie kann ich den HTML Code dementsprechend ändern?

  • #6

    Chris (Donnerstag, 22 November 2012 19:17)

    Hier weitere Erklärungen zu diesem Turtorial:

    http://award.jimdo.com/tutorials/ein-und-ausblenden-von-texten-und-bildern/#swap

  • #7

    fc-schoenheide (Freitag, 22 Februar 2013 16:01)

    gibt es die möglichkeit auch mehre texte per klick aufzumachen, also die überschriften sind nebeneinander wie hier
    http://www.vfl.de/startseite.html
    bei Nächstes und Letztes Spiel dort.
    geht das?
    MfG

  • #8

    Centrifugal Juicer (Mittwoch, 17 April 2013 05:31)

    This is a great write-up! Thank you for sharing with us!

  • #9

    John Frantz (Donnerstag, 16 Mai 2013 18:37)

    Hallo,
    sehr guter toller Script.,ich werde diesen Einsätzen für AGBs,
    Garantie,Widerufsrecht, usw. Da durch hat der Kunde und ich ein besseren Überblick.
    Danke
    MfG John

  • #10

    HARDWARECOP/ADMIN (Samstag, 08 Juni 2013 22:55)

    Danke für den Script!

    @Mehrere ausklappbare Texte: Einfach "hideme" z.B. in "hideme2" und "swaplink" z.B. in "swaplink2" umbenennen :)

  • #11

    Migi (Freitag, 10 Januar 2014 19:03)

    cool

  • #12

    Ing. Manuel Göschl, MBA (Donnerstag, 23 Oktober 2014 17:41)

    Kann es sein, dass das mit der neuen Jimdo-Version nicht mehr funktioniert?
    Was mache ich falsch?
    Hat wer eine Lösung (es passiert nichts, wenn man auf "einblenden" klickt.

  • #13

    Elisabeth Pirolt (Dienstag, 06 Januar 2015 16:14)

    Super, danke!
    Nur noch eins: Wie passe ich das Style des "Einblenden/Ausblenden"-Links meinen bestehenden Links an? Das Blau passt leider sowas von gar nicht in mein Design...
    Danke!

  • #14

    adamschneiter (Dienstag, 31 März 2015 02:00)

    Hey ich habe das ganze nochmals a bizl adaptiert. 1. Titel angeben, 2. Header (also eine Kopfzeile von 3-4 Saetzen welche dargestellt wird) 3. Text. Ihr koennt natuerlich 'Flip out' durch Aufklappen erseen, das gleiche fuer 'Close". Fuer eure einzelnen Widgets umbedingt die zwei textstelen wo Portland (einfach Suchfunktion benutzen) steht fuer jeden einzelnen beitrag individuell mit anderem namen versehen (z.B. durch Post1, dann im naechsten Post2...)

    <script type="text/javascript">
    //<![CDATA[
    function swap(openlink,closelink, linkid, dataid)
    {
    if( document.getElementById(dataid).style.display == 'none')
    {
    document.getElementById(dataid).style.display='inline';
    document.getElementById(linkid).firstChild.nodeValue=closelink;
    } else
    {
    document.getElementById(dataid).style.display='none';
    document.getElementById(linkid).firstChild.nodeValue=openlink;
    }
    }
    //]]>
    </script>
    <table class="tab24" align="center" border="0" cellpadding="0" cellspacing="0" width="100%">
    <tr bgcolor="transparent">
    <td width="50%" height="35" style="padding-left:5px; padding-right:10px;">
    <div class="n j-header">
    <h1>
    TITEL
    </h1>
    </div>
    </td>
    <td align="right" width="49%" style="padding-left:10px; padding-right:10px;">
    <a href="#swap" onclick="javascript:swap('Flip out','Close', 'swaplink', 'vancouver_hide')" id="swaplink" onfocus="this.blur()" name="swaplink">Flip out</a>
    </td>
    </tr>

    <tr style=" text-align: justify; font-size: 16px; font-weight: normal; background-color: transparent;">
    <td colspan="3" style="padding-left:10px; padding-right:10px;">
    <div>
    <br />

    <p>
    HEADER
    </p>
    </div>

    <div id="vancouver_hide" style="display:none">
    <p>
    TEXT
    </p>
    </div>
    </td>
    </tr>
    </table>

  • #15

    Julianeschultheis (Freitag, 19 Februar 2016 13:31)

    Wo steht denn Portland???

  • #16

    Michael (Dienstag, 16 August 2016 14:09)

    Vancouver muss ersetzt werden, nicht portland

  • #17

    Jens (Mittwoch, 14 Dezember 2016 15:05)

    Wie kann ich die Farbe vom Flip out ändern?

  • #18

    Matthias (Mittwoch, 19 April 2017 14:05)

    Hallo,

    wie kann ich dem Text für das Ein- und Ausblenden eine andere Farbe zuordnen?
    Am Beispiel oben ist dieser grau und auf meiner Homepage sodann rot. Hätte gerne einen bestimmten RGB Wert eingegeben.

    Danke schon mal im Voraus!