Ein- und Ausblendungen von Texten und Bildern - Jimdo Award Tutorial


Immer wieder nervt es. Eine Seite mit sehr vielen Inhalten. Besonders bei FAQs ist eine Ein- und Ausblendung von Texten wichtig. Deshalb haben wir uns einen Script erstellt, der genau diesen Anforderungen gerecht wird. Er ist einfach zu bedienen und wird von uns in unserem FAQ / Support / Hilfeseite auch genutzt. Wir denken, das wir vielen helfen Ihre Seite übersichtlicher zu gestallten und mehr Inhalte auf eine Seite zu bringen. Da je nach bedarf der Nutzer sagen kann ob er die Seite sehen will oder nicht! Ein riesen Vorteil, denn der User ist immer daran interessiert schnell an die geforderten Informationen zu kommen und das auf möglichst einfachen Weg. So genug geredet jetzt zum Tutorial >>


Vorschau:

Jimdo Page Award Tutorials (Hier den Text ändern)! Einblenden

 

 

Code:

<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="#FFCC00">
<td width="33%" height="35" style="padding-left:15px; padding-right:15px;">
</td>
<td width="34%" align="center">

Jimdo Page Award Tutorials (Hier den Text ändern)!

</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"Hier Titel eingeben</span>
</div>

<p>
Hier können Sie den text einfügen, den Sie angezeigt haben wollen. Auch bilder können Sie mit dem Code zum hinzufügen von Bildern hier reinschreiben!
</p>

</div>
</td>
</tr>
</table>


Um die Farbe des Frames, zu ändern musst du den Farbcode, den wir für dich orange makiert haben verändern. Eine Tabelle mit den Codes für einzelnen Farben findest du unter diesem Eintrag.

Nimm genau die Farbe die am besten für deine Website passt!


Damit du mehrere Ausklapptexte auf einer Seite integrieren kannst musst du noch etwas an dem Code verändern. Wir haben dir die Code-Stellen grün und blau makiert, die du verändern musst. Fügst du den Ein- und Ausklapptext zweimal ein, kannst du den ersten Ein- und Ausklapptext-Script so lassen und fügst hinter den Code-Stellen die grün und blau einfach immer nur eine "1" hinzu. Bei 3 Ein- und Ausklapptexten, lässt du den ersten Ausklapptext wieder so wie er ist und schreibst hinter den Code-Stellen des zweiten Ein- und Ausklapptextes eine "1" und hinter den markierten Code-Stellen des dritten Ein- und Ausklapptext eine "2". Dann funktioniert der Code auch für mehre Ausklapptexte auf einer Seite!


Um die Hintergrundfarbe des ausgeklappten Textes zu ändern musst du den RGB Tahlen Code ändern. Diesen haben wir für dich rot makiert. Eine Zahlentabelle auf der die einzelnen Zahlen Farben zugeordnet sind, werden wir zu einem spätern Zeitpunkt hier veröffentlichen.

 

 

 


Kommentar schreiben

Kommentare: 10
  • #1

    teenage-song (Montag, 25 Juli 2011 15:42)

    gute idee :D

  • #2

    Speedskating-Salzburg (Donnerstag, 05 Januar 2012 09:25)

    Hallo!

    Kann ich statt dem Text "einblenden, ausblenden" auch ein Bild setzen. Ich hab so etwas schon auf einer anderen Website gesehen, bei dem der Betreiber statt dem Text einen Pfeil, der nach unten zeigt für das Ausklappen verwendet und einen Pfeil, der nach oben zeigt für das Zuklappen verwendet.

    Bitte um Feedback. Danke.

    Schöne Grüße
    Tom

  • #3

    warrior-cats-clans-rpgs (Samstag, 09 November 2013 10:39)

    Funktioniert bei mir nicht!! Ich klicke auf Einblenden und nichts passiert!! D:

  • #4

    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.

  • #5

    dramaturgie-on-demand (Donnerstag, 05 Februar 2015 18:15)

    super, vielen dank!
    Aber kann man in dem Text, den man einfügt, auch Auszeichnungen/Formatierungen verwenden, also Worte durch fette oder kursive Schrift oder andere Schriftgrößen hervorheben? Und kann man die Überschrift statt mittig auch linksbündig ausrichten?

  • #6

    Hanudin (Mittwoch, 30 November 2016 15:28)

    Ijin Ser Gan, info berbahaya luka bernanah, kunjungi blognya http://www.tokodehan.com/2016/11/berbahayakah-luka-setelah-operasi-keluar-nanah.html

  • #7

    Matthias (Mittwoch, 19 April 2017 13:58)

    Hallo,

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

    Danke schon mal im Voraus!

  • #8

    Koswara (Montag, 05 Juni 2017 04:06)

    Untuk Menambah kekebalan tubuh anak dan mengoptimalkan tumbuh kembangnya kunjungi blog kami di http://goo.gl/VC1Acb

  • #9

    Idoy (Mittwoch, 07 Juni 2017 05:39)

    Info Obat Luka Borok Reaksi Cepat Paling Ampuh 100% Herbal. Kunjungi Blognya http://goo.gl/iDpg8g

  • #10

    Hisna (Mittwoch, 21 Juni 2017 04:33)

    Info Untuk Obat Herbal Luka Gatal Bernanah . Kunjungi Blognya http://obatlukagatalbernanah.blogspot.co.id/2017/06/obat-luka-gatal-bernanah.html