• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Hallo!

B

bailaho

Neues Mitglied
Hallo!

Ich habe eine Seite mit ellenlangem Text. Was ich gerne hätte, dass ich irgendwo ein "mehr" setzen kann und wenn man draufklickt, klappt sicher der übrige Text nach unten auf. Jetzt will ich dieses "mehr" aber an mehreren Stellen platzieren und es soll sich dann immer nur ein bestimmter festgelegter Text nach unten ausklappen.

Gibt es dafür einen Code?


Beispiel:

Lorem Ipsum
Bla... bla... bla... bla... bla... Bla... bla... bla... bla... bla... Bla... bla... bla... bla... bla...
Bla... bla... bla... bla... bla... Bla... bla... bla... bla... bla... Bla... bla... bla... bla... bla...
Bla... bla... bla... bla... bla... Bla... bla... bla... bla... bla... Bla... bla... bla... bla... bla...
Bla... bla... bla... bla... bla... Bla... bla... bla... bla... bla... Bla... bla... bla... bla... bla...
Bla... bla... bla... bla... bla... [mehr]

Lorem Ipsum
Bla... bla... bla... bla... bla... Bla... bla... bla... bla... bla... Bla... bla... bla... bla... bla...
Bla... bla... bla... bla... bla... Bla... bla... bla... bla... bla... Bla... bla... bla... bla... bla...
Bla... bla... bla... bla... bla... Bla... bla... bla... bla... bla... Bla... bla... bla... bla... bla...
Bla... bla... bla... bla... bla... Bla... bla... bla... bla... bla... Bla... bla... bla... bla... bla...
Bla... bla... bla... bla... bla... [mehr]

Lorem Ipsum
Bla... bla... bla... bla... bla... Bla... bla... bla... bla... bla... Bla... bla... bla... bla... bla...
Bla... bla... bla... bla... bla... Bla... bla... bla... bla... bla... Bla... bla... bla... bla... bla...
Bla... bla... bla... bla... bla... Bla... bla... bla... bla... bla... Bla... bla... bla... bla... bla...
Bla... bla... bla... bla... bla... Bla... bla... bla... bla... bla... Bla... bla... bla... bla... bla...
Bla... bla... bla... bla... bla... [mehr]

etc.
 
das sollte mit Javascript zu realisieren sein. Siehe dazu "onclick" und "getElementBy".
rein theoretisch also:
Wenn mehr geklickt setze overflow von Element XY auf none und höhe auf x pixel.
 
Hallo!

die Wahl eines sinnvollen Titels, kann die Chance auf eine Antwort erhöhen.
 
Das lässt sich durch dynamische Ersetzung von CSS-Klassen bewerkstelligen und funktioniert am einfachsten mit jQuery.
HTML: 
<!DOCTYPE html>
<html>
<head>
    <title>Overflow</title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js">
    </script>
    <style type="text/css">
        #overflow {
            width: 300px;
            height: 100px;
        }
          .hidden {
            overflow: hidden;
        }
    </style>
        <script type="text/javascript">
            $(document).ready(function() {
                $("#overflow").click(function() {
                    $(this).toggleClass("hidden");
                });
            });
    </script>
</head>
<body>
    <div id="overflow" class="hidden" >
        <p>Viel Blindtext ... </p>
    </div>
</body>
</html>
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben