HTML Spoiler Code wie in Foren

kl1max · 20. August 2011

Hi Leute,

für eine Website möchte ich einen oder mehrere Spoiler einbauen, der genauso aussieht wie hier:

Hier ist ein versteckter Text

Gibt es eine Möglichkeit den nur mit HTML & CSS Tags so hinzubiegen?

Wäre ne große Hilfe, hab nämlich schon einige andere Foren etc abgeklappert, aber das sah alles nich so aus wie oben!

Grüße Mo

Madman1209 · 20. August 2011

Hi,

kennst du Google?

Bitte schön

Wenn es komplett identisch sein soll schau dir doch den Code von hier einfach an im Quelltext. Oder lad dir Forensoftware runter und extrahiere da das CSS.

VG,
Mad

kl1max · 20. August 2011

wie schon gesagt, das hab ich ja schon alles gemacht..
aber sollte eben kein button sein, sondern nur das [+] und das [-]...

das mit dem Quelltext hab ich schon gemacht... sieht zwar jetzt gleich aus, aber ich bekomm das ding auf klick noch nich auf und zu, ich nehm an... mir fehlt iwo das JS... kann mir da jmd helfen?

savuti · 20. August 2011

Auf die Schnelle hier von der Seite:

html:

Code:

<div class="spoiler-forum spoiler-hidden">
<a class="spoiler-toggle spoiler-hide-initially" onclick="return toggleSpoiler(this)" href="#">
<strong>Spoiler!</strong>
</a>
<div class="spoiler-text">Hier ist ein versteckter Text</div>
</div>

css:

Code:

div.spoiler-forum {
    background: none repeat scroll 0 0 #EEEEEE;
    border: 1px solid #DDDDDD;
    border-radius: 5px 5px 5px 5px;
    padding: 5px 8px;
}

div.spoiler-hidden a.spoiler-toggle {
    background-position: 0 -16px;
}

a.spoiler-toggle {
    background: url("/design/toggle-button.png") no-repeat scroll 0 0 transparent;
    color: #000000;
    padding-left: 13px;
}

div.spoiler-hidden .spoiler-text {
    display: none;
}

div.spoiler-text {
    padding: 5px 0;
}

kl1max · 20. August 2011

joa das geht alles, danke.. aber auf onclick passiert nichts...

edit, ich nehm an, da fehlt i.ein javascript welches ich nicht kenn.. :|

Augen1337 · 20. August 2011

Ich versteh grad das Problem nicht.

Eine CSS-Klasse mit "display:none;"
Und mit nem onclick-event auf den Container mit [+] die CSS-Klasse togglen (JS). Voilà

Benutzt du jQuery oder so?
Benutz dort .toggleClass.
Und benutz das jQuery-Event ".live("click",..)"

kl1max · 20. August 2011

mein HTML Doc sieht grad folgendermaßen aus:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de">
<link rel="stylesheet" type="text/css" href="spoiler.css">

<head>
<title>Spoiler</title>



</head>

<div class="spoiler-forum spoiler-hidden">
<a class="spoiler-toggle spoiler-hide-initially" onclick="return toggleSpoiler(this)" href="#">
<strong>Spoiler!</strong>
</a>
<div class="spoiler-text">Hier ist ein versteckter Text</div>
</div>




</body>

da is ja nirgendwo was mit JS... da weiß ich nich weiter wo was hin muss...

Grüße

Augen1337 · 20. August 2011

Schreib ne eigene Datei für JS (Code, Inhalte und Style getrennt), binde sie im Header der HTML Datei ein. Dazu jQuery auch einbinden.

Dann registrierst du beim "on Document Ready" ein Event

Code:

$("#spoilbutton").live("click", function(){
    $("spoiltext").toggleClass("hideornot");
});

oder

Code:

$("#spoilbutton").click(function(){
    $("spoiltext").toggleClass("hideornot");
});

Spoilbutton = Container mit dem [+/-]
Spoiltext = Container mit dem Spoilerinhalt
hideornot = CSS Klasse mit dem "display:none;"

Du kannst aber auch direkt mit ".css()" arbeiten und dir das .toggleClass ersparen

.

kl1max · 20. August 2011

Sorry, kenne mich mit jQuery etc garnicht aus...

Also so siehts aktuell bei mir aus:

medial-design.de/spoiler/spoiler.html

nur auf klick passiert eben nichts, denke da fehlt einfach nur n einfaces JS im Head? Kann das sein?

Würde mich über Hilfe sehr freuen!

Madman1209 · 20. August 2011

Hi,

Firebug installieren, in die Console gucken.

toggleSpoiler is not defined

VG,
Mad

kl1max · 20. August 2011

wie definier ich das?
bzw wo kann ich dannach schauen im cb quellcode?^^

Lawnmower · 20. August 2011

du brauchst einfach ne Javascript Funktion die so heisst.

Code:

<script>
  function toggleSpoiler()
  {
    //Hier Code um Spoiler ein- oder ausblenden
  }
</script>

Madman1209 · 20. August 2011

Hi,

mal eine Frage: Wieso machst du sowas selber, wenn du offensichtlich keine Ahnung von der Materie Webprogrammierung hast? Ist nicht böse gemeint, wundert mich nur. Da hättest du in der Mittagspause mal an der FH oder Uni vorbeugeguggt und einem Info-Student einen Kaffee ausgegeben, das wäre schneller und besser im Ergebnis.

Wie gesagt, ist nicht böse gemeint. Aber es wundert schon dass du weder JS noch Web-Debugging beherrscht und dann an einer HP rumprogrammierst. Vor allem, da es etliche Anleitungen im Netz gibt dafür.

VG,
Mad

kl1max · 20. August 2011

naja.. ich hab halt die page für die das gedacht is, selbst gecoded. und is auch recht gut geworden, nach eigener einschätzung...
und da is mein ehrgeiz zu groß um das immer jmd anderen machen zu lassen..

und um dabei vlt noch ein BISSCHEN was zu lernen, frag ich eben im Forum...

edit: jetzt bin ich soweit, dass sich mein Spoiler öffnet und schließt.
http://medial-design.de/spoiler/spoiler.html
allerdings sollte er von beginn an zu sein :|

Madman1209 · 20. August 2011

Hi,

ok, wenn es auch um den Lerneffekt geht will ich gar nichts gesagt haben :-) Wenn heutzutage schonmal jemand freiwillig lernt

selten genug.

Code:

function spoil(id)
{
  if (document.getElementById) 
    {
     var divid = document.getElementById(id);
     divid.style.display = (divid.style.display=='block'?'none':'block');
    } 
}

Ist jetz einfach mal nur so neben die Tüte gekotzt. Keine Garantie, dass da etwas funktioniert. Aber vom Prinzip her sollte es dir klar werden. Wenn auf den Button geklickt wird muss JavaScript arbeiten. In meinem Fall wird die Methode "Spoil" aufgerufen. Die kriegt die id des Elements mit übergeben, holt sich das entsprechende Element und zeigt / versteckt es.

Wie gesagt, bedarf evtl noch Feinschliff, ist jetzt nur so aus dem Kopf.

VG,
Mad

Edit: Wenn er zu sein sollte dann schließe ihn beim "onLoad"-Ereignis deiner Seite :-)

kl1max · 20. August 2011

danke soweit...
aber wie funktioniert das mit dem onLoad?

<body onLoad="verstecken"> ?

Madman1209 · 20. August 2011

Hi,

Bitte schön

VG,
Mad

kl1max · 20. August 2011

da war ich leider schon..
:| aber was is denn meine function in dem von mir verwendeten script?
dachte das wäre "versteckt" bzw "verstecken"

Madman1209 · 20. August 2011

Hi,

nein. Du hast die Funktion nicht als solche deklariert.

Code:

$(document).ready(function() {
$('#verstecken').click(function() {
if ($('#versteckt').is(":hidden"))
{
$('#versteckt').slideDown("slow");
} else {
$('#versteckt').slideUp("slow");
}
return false;
});

Das ist dein Code. Da findet per se kein Methodenaufruf statt sondern direkt die Abarbeitung. Du musst also eine Methode schreiben, die so etwas enthält:

Code:

$('#versteckt').slideUp("slow");

Und diese muss dan im OnLoad aufgerufen werden.

VG,
Mad

kl1max · 21. August 2011

also ich bekomm da iwie nichts hin... ich glaube ich sollte mit dem Thema JS aufhören

HTML Spoiler Code wie in Foren

Lieutenant

Fleet Admiral

Lieutenant

Lt. Commander

Lieutenant

Captain Pro

Lieutenant

Captain Pro

Lieutenant

Fleet Admiral

Lieutenant

Maître de cuisine Pro

Fleet Admiral

Lieutenant

Fleet Admiral

Lieutenant

Fleet Admiral

Lieutenant

Fleet Admiral

Lieutenant

Ähnliche Themen