Wie geht panelbar Programmierung?

Fragezeichen · 5 November 2012

Hallo, zunächst muß ich zugeben, daß ich bzgl. Nomenklatur und Unterforum (lieber Moderator, bitte thread verschieben, wenn nötig) etwas desorientiert bin. Worum geht´s? Ich möchte in html Text darstellen, der mittels eines anklickbaren Pfeiles sich nach unten ausdehnen (dann werden mehr Zeilen gezeigt) und wieder einklappen lässt. Wenn ich das richtig verstanden habe nennt man das panelbar. Außer vorgegeben plugins mit Lizenz hab ich noch nichts brauchbares im Netz gefunden, wie man das mittels html, JS oder ähnlichem angehen kann.
Könnt Ihr mir bitte helfen?

threadi · 5 November 2012

Wie Du schon richtig schreibst wäre JavaScript der passende Weg. Wieso öffnest Du das Thema dann im HTML-Forum?

An sich ist dafür nur ein simples JavaScript, welches per CSS die Sichtbarkeit und/oder Höhenangabe eines Elementes beeinflusst. Wenn man eine Animation dazu haben möchte, müsste man dies natürlich per JavaScript ergänzen. Funktionen wie von jQuery das animate() sind dabei auch recht hilfreich.

Tronjer · 5 November 2012

Dafür sollte es diverse kostenlose plugins geben, aber so etwas lässt sich auch einfach nachbauen.

HTML:

<!DOCTYPE html>
<html>
<head>
<title>Foobar</title>
<meta charset="utf-8" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<style>
* {
    margin: 0;
    padding: 0;
}
body {
    font-family: verdana, arial, sans-serif;
}

#box {
    margin: 50px auto 0;
    width: 300px;
}

#headline, #arrow {
    float: left;
    line-height: 25px;
    text-align: center;
}

#headline {
    font-size: 16px;
    background: red;
    width: 280px;
}

#arrow {
    color: #fff;
    background: #000;
    width: 20px;
    font-size: bold;
    cursor: pointer;
}

#content {
    clear: both;
    font-size: 12px;
    background: #ccc;
    padding: 15px;
}
</style>
</head>
<body>
    <div id="box">
        <p id="headline">Das ist die Überschrift</p>
        <p id="arrow">&darr;</p>
        <p id="content">
        Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget 
        dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, 
        nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, 
        sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate 
        </p>
    </div>
    <script>
    $('#arrow').click(function() {
        $('#content').animate({
            height: 'toggle'
        }, 750);
    });
    </script>
</body>
</html>

Wie geht panelbar Programmierung?

Fragezeichen

Neues Mitglied

threadi

Moderator

Tronjer

Senior HTML'ler

Neueste Beiträge