Spoiler erstellen?

[trix0matrix9]

wie kann ich einen Spoiler erstellen?
halt so einen wo, wenn man draufklick, dann geht das, was darin enthalten ist zu

 

[Mad Dog]

hmm das ist etwas komplizierter.
ich wuerde es so machen:

als beispiel sagen wir mal wir haben ein forum.
dann muesste jeder beitrag eine nummer bekommen, z.b. eine id.
wenn dann auf einen Thanks button geklickt wird, wird in einer datenbank die ID des beitrags gespeichert.
die seite wird ausserdem neu geladen.
in der der funktion zur anzeige des textes muss geprueft werden ob der user sich fuer den beitrag bedankt hat.
wenn ja dann wird der teil der davor versteckt war angezeigt.

so wuerde ich es jedenfalls machen.

 

[mermshaus]

Edit: Ups, habe die Antwort vor dem Absenden nicht gesehen (ja, ich hatte das Tab etliche Stunden offen ;)). Was ich hier implementiere, ist im Sinne des Begriffs eine "Spoiler"-Funktion. Das heißt, Boxen, die optional eingeblendet werden können und die standardmäßig ausgeblendet sind. Bin mir nicht sicher, ob das gesucht wird.

Sowas habe ich mal gebastelt. Die Idee war allerdings, es möglichst sauber zu implementieren, also CSS-Klassen zu verwenden und auch eine halbwegs brauchbare Alternative für den Fall zu schaffen, dass JavaScript deaktiviert ist. Deshalb mussten etliche Hilfsfunktionen verwendet werden.

index.php

<style type="text/css">
* {
    margin: 0;
    padding: 0;
    }

body {
    font-family: Verdana;
    font-size: 10px;
    }

.spoilerbox {
    border: 1px solid #ccc;
    margin: 10px;
    }

.spoilerbox .content {
    padding: 5px;
    }

/* The .nojs class is used when JavaScript is deactivated */

.spoilerbox .content.nojs {
    background: #eee;
    color: #eee;
    }

.spoilerbox div.content.nojs:hover {
    background: #fff;
    color: #000;
    }

.spoilerbox .header {
    padding: 3px;
    background: #eee;
    color: #666;
    }

.spoilerbox p.header.expanded {
    border-bottom: 1px solid #ccc;
    }
</style>

<script type="text/javascript" src="lib.js"></script>

<script type="text/javascript">
// <![CDATA[
window.onload = function()
{
    var boxes = document.getElementsByTagName('div');

    for (var i = 0; i < boxes.length; i++) {

        if (CssHelper.hasClass(boxes[i], 'spoilerbox')) {
            var p = boxes[i].getElementsByTagName('p')[0];
            p.innerHTML = 'Spoiler (show)';
            var content = boxes[i].getElementsByTagName('div')[0];

            CssHelper.removeClass(content, 'nojs');
            p.style.cursor = 'pointer';

            var f = function(p, content)
            {
                p.onclick = function()
                {
                    if (content.style.display != 'block') {
                        CssHelper.addClass(p, 'expanded');
                        p.innerHTML = 'Spoiler (hide)';
                        content.style.display = 'block';
                    } else {
                        CssHelper.removeClass(p, 'expanded');
                        p.innerHTML = 'Spoiler (show)';
                        content.style.display = 'none';
                    }
                }
            }

            f(p, content);

            content.style.display = 'none';
        }
    }
}
// ]]>
</script>

<div class="spoilerbox">
    <p class="header">Spoiler (hover to reveal)</p>
    <div class="content nojs">
        <p>Spoiler Spoiler Spoiler Spoiler Spoiler Spoiler Spoiler Spoiler Spoiler Spoiler</p>
        <p>Text Text Text TExt Text Text Text Text</p>
    </div>
</div>

<div class="spoilerbox">
    <p class="header">Spoiler (hover to reveal)</p>
    <div class="content nojs">
        <p>Spoiler Spoiler Spoiler Spoiler Spoiler Spoiler Spoiler Spoiler Spoiler Spoiler</p>
        <blockquote><p>Dies ist ein Test.</p></blockquote>
        <p>Text Text Text TExt Text Text Text Text</p>
    </div>
</div>

<div class="spoilerbox">
    <p class="header">Spoiler (hover to reveal)</p>
    <div class="content nojs">
        <p>Spoiler Spoiler Spoiler Spoiler Spoiler Spoiler Spoiler Spoiler Spoiler Spoiler</p>
        <p>Text Text Text TExt Text Text Text Text</p>
    </div>
</div>

lib.js

/**
 * Weitere String-Funktionen
 */
function StringUtils() {}

/**
 * Schneidet die angegebenen Zeichen auf beiden Seiten des Strings ab
 *
 * @param str   String Zuzuschneidender String
 * @param chars String (default: \s (Whitespace)) Charakterklasse von Zeichen,
 *                     die abgeschnitten werden sollen
 * @return String Zugeschnittener String
 */
StringUtils.trim = function(str, chars)
{
    return StringUtils.ltrim(StringUtils.rtrim(str, chars), chars);
}

/**
 * Schneidet die angegebenen Zeichen am Anfang des Strings ab
 *
 * @param str   String Zuzuschneidender String
 * @param chars String (default: \s (Whitespace)) Charakterklasse von Zeichen,
 *                     die abgeschnitten werden sollen
 * @return String Zugeschnittener String
 */
StringUtils.ltrim = function(str, chars)
{
    chars = chars || "\\s";
    return str.replace(new RegExp("^[" + chars + "]+", "g"), "");
}

/**
 * Schneidet die angegebenen Zeichen am Ende des Strings ab
 * 
 * @param str   String Zuzuschneidender String
 * @param chars String (default: \s (Whitespace)) Charakterklasse von Zeichen,
 *                     die abgeschnitten werden sollen
 * @return String Zugeschnittener String
 */
StringUtils.rtrim = function(str, chars)
{
    chars = chars || "\\s";
    return str.replace(new RegExp("[" + chars + "]+$", "g"), "");
}

/**
 * Funktionen zur Organisation der CSS-Klassen eines Elements
 *
 * @author  Marc Ermshaus <http://ermshaus.org/>
 * @version 2009-09-07
 */
function CssHelper() {}

/**
 * Gibt zurück, ob ein HtmlElement die angegebene CSS-Klasse enthält
 *
 * @param node HtmlElement Zu prüfendes HtmlElement
 * @param cl   String      Zu suchende CSS-Klasse
 * @return bool true, wenn das Element die CSS-Klasse enthält
 */
CssHelper.hasClass = function(node, cl)
{
    var classes = StringUtils.trim(node.className).split(' ');
    for (var i = 0; i < classes.length; i++) {
        if (cl == classes[i]) {
            return true;
        }
    }

    return false;
}

/**
 * Fügt eine CSS-Klasse hinten an die Klassendefinition eines Elements an, falls
 * sie noch nicht vorhanden ist
 *
 * @param node HtmlElement Ziel-HtmlElement
 * @param cl   String      Hinzuzufügende CSS-Klasse
 */
CssHelper.addClass = function(node, cl)
{
    if (!CssHelper.hasClass(node, cl)) {
        node.className += ' ' + cl;
    }
}

/**
 * Entfernt eine CSS-Klasse aus der Klassendefinition eines Elements
 *
 * @param node HtmlElement Ziel-HtmlElement
 * @param cl   String      Zu entfernende CSS-Klasse
 */
CssHelper.removeClass = function(node, cl)
{
    var classes = StringUtils.trim(node.className).split(' ');
    var newClasses = '';
    for (j = 0; j < classes.length; j++) {
        if (cl != classes[j]) {
            newClasses += classes[j] + ' ';
        }
    }
    node.className = newClasses;
}

 

[Mad Dog]

naja lage ich mit dem thanks button richtig oder ist der spoiler noch etwas komplett anderes?
bitte um genaue erklaerung

 

[rotz]

Spoiler

Dein versteckter Text

 

[Space Vampire]

naja lage ich mit dem thanks button richtig oder ist der spoiler noch etwas komplett anderes?
bitte um genaue erklaerung

Es gibt (speziell in Foren, aber auch auf anderen Websites) zwei grundlegende Verwendungsweisen für verborgenen Text.

Was du oben beschrieben hast ist
der klassische Hide:
Er setzt voraus, dass man sich z.B. für einen Beitrag bedankt oder im Thema geantwortet hat.
Ist diese Voraussetzung EINMAL erfüllt, wird der Hide dauerhaft aufgehoben.
Anwendungsbereiche z.B.: Rätselspiele, Premiumfunktionen, etc.

Dann gibt es noch
den (dynamischen) Spoiler:
Dieser wird in der Regel durch simplen Klick auf ein Bedienelement sichtbar gemacht. Der User kann zu jeder Zeit selber entscheiden ob er den Versteckten Inhalt einsehen möchte oder nicht, ohne vorher bestimmte Bedingungen erfüllt zu haben. Im Idealfall kann man es mit einem weiteren Klick wieder schließen. Beim nächsten Besuch der Seite ist das Spoilerfeld wieder geschlossen und muss erneut geöffnet werden.
Anwendungsbereiche z.B.: Filmhandlung, Buchplots, Gamelösungen, Hints jeglicher Art, etc.

ich hoffe, das hilft dir weiter MadDog

EDIT:
Vor lauter Erklärbär ganz vergessen
@Themenstarter:
Brauchst du das für ne Website oder ein Forum?
Für die meisten Foren gibts das nämlich fix und fertig zum Download auf den einschlägigen Modder-Seiten ;-)