mehr button-ausklappbar

    Hallo ich habe eine Frage zu einem ausklappbaren mehr/zu Element, ich habe es integriert und alles funktioniert auch, nur wollte ich den 'mehr' Text und dn Text der sich ausklappen sollte, weiß machen-zur Zeit ist es schwarz...wie und wo muss ich es definieren. danke und vg

    Code
    <SPAN STYLE="CURSOR:POINTER; DISPLAY : BLOCK" ONCLICK=
"DOCUMENT.GETELEMENTBYID('TEXT2').STYLE.DISPLAY='BLOCK';DOCUMENT.GETELEMENTBYID('AN').STYLE.DISPLAY='NONE';DOCUMENT.GETELEMENTBYID('ZU').STYLE.DISPLAY='BLOCK'" ID="AN"><STRONG>MEHR</STRONG></SPAN>
<SPAN ONCLICK="DOCUMENT.GETELEMENTBYID('TEXT2').STYLE.DISPLAY='NONE';DOCUMENT.GETELEMENTBYID('AN').STYLE.DISPLAY='BLOCK';DOCUMENT.GETELEMENTBYID('ZU').STYLE.DISPLAY='NONE'" ID="ZU" STYLE=
"DISPLAY: NONE;CURSOR:POINTER">ZU</SPAN><BR />

<DIV ID="TEXT2" STYLE="DISPLAY: NONE">

    Also eigentlich kann das so nicht funktionieren... welchen Browser benutzt du? Bei mir im FireFox, IE11 und Chrome geht es nicht!

    Aber deine Frage... die Schriftfarbe. Die kannst du mit einer style="color: #fff;" in den beiden <span> Elementen auf weiß oder jeder beliebige andere Farbe einstellen.

    Jetzt zu deinen Fehlern:

    1. Es ist allgemeine Konvention im HTML und CSS Code Kleinschreibung zu nutzen - außer man hat einen besonderen Grund für Großbuchstaben (zB weil man eine id oder eine Klasse oder einen Namen mit Großbuchstaben 'speziell' machen will name="Nudel"

    2. Außerdem hast du das letzte <div> nicht mit </div> geschlossen.

    3. Dein JavaScript hat die falsche Syntax! Auch wieder die Nutzung von Großbuchstaben (auch hier sollte Kleinschreibung genutzt werden) und es sollte die richtige Schreibweise verwendet werden ... Falsch ist DOCUMENT.GETELEMENTBYID Richtig wäre document.getElementById


    Dein korrigierter Code könnte so aussehen

    Code
    <span style="cursor: pointer; display: block; color: #fff" onclick="document.getElementById('text2').style.display='block'; document.getElementById('an').style.display='none'; document.getElementById('zu').style.display='block'" id="an"><strong>MEHR</strong></span>
<span onclick="document.getElementById('text2').style.disply='none'; document.getElementById('an').style.display='block'; document.getElementById('zu').style.display='none'" id="zu" style="display: none; cursor: pointer; color: #fff">ZU</span><br>
<div id="text2" style="display: none;"></div>

    Guten Morgen Sailor, vielen Dank für Deine Antwort. Der Code ist schon so , wie du es beschrieben hast,nur beim rauskopieren aus Word sind die Großbuchstaben entstanden, ich habe außerdem nicht den ganzen Code eingefügt. So sieht es aus auf der Seite :) Und sollte eigentlich funktionieren, ich nutze Safari und Chrome.Ich habe Deinen Code eingesetzt, und noch so ergänzt, dass der untere Text, der sich ausklappt,auch weiß ist. Alles funktioniert prima!! Vielen lieben Dank , es freut mich, es gibt noch Menschne, die den Programmier-Laien schnell mit einem Ratschlag helfen!


    VG Agnieszka


    <span style="cursor: pointer; display: block; color: #fff" onclick=

    "document.getElementById('text2').style.display='block'; document.getElementById('an').style.display='none'; document.getElementById('zu').style.display='block'" id="an"><strong>MEHR</strong></span>

    <span onclick="document.getElementById('text2').style.display='none'; document.getElementById('an').style.display='block'; document.getElementById('zu').style.display='none'" id="zu" style=

    "display: none; cursor: pointer; color: #fff">ZU</span><br />


    <div id="text2" style="display: none; color: #fff">

    blablabla

    </div>

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!

Benutzerkonto erstellen Anmelden