Suche: JavaScript zum "aufklappen"

Hallo,
ich suche ein Script das es ermöglicht durch Klick auf einen Link (text??) Inhalt anzuzeigen.

Ich versuch es kurz anhand eines kleinen Beispiels zu erklären.

Link1
Link2
Link3
Link4

Wenn ich jetzt auf einen dieser Links klicke soll sich ein Text aufklappen (bsp Link 2), dh.

Link1
Link2
Hier steht der Text der beim klick auf Link 2 erscheint
Link3
Link4

Wenn man nun wieder auf Link2 klickt soll der Text wieder verschwinden.

Eigentlich genauso wie Jan Bender (hoffe es macht dir nichst aus das ich deine Seite nehme) auf seiner Seite mit den Boxen auf der Seite.
janbender.bplaced.net/neu/

Leider kann ich kein bisschen JavaScript.

MfG, andi

Hey, da besucht jemand meine Seite :ps:

Nun, die Boxen basieren auf den Mootools.

mootools.net/

Da gibt es zahlreiche nette Animationen und unter anderem eine, die ein Div aufklappt. Du musst also nur den Text in ein div setzen und dieses darüber einblenden lassen.

Wenn du auf die Animation verzichten kannst, geht das auch einfacher über Javascript (weiß nur nicht wie).

Jep :wink:
Oke, danke!

…und was mache ich, wenn ich ohne JavaScript auf diese Seite komme…?

(Hatten wir dieses Thema mit JS in einer Navi nicht schon x-mal? :unamused: )

Wenn man solche Seite ohne aktiviertes js besucht, wie ich das
seit vielen Jahren tue, sieht man einfach eine defekte oder leere
Seite und weiß, daß der Autor keinen Inhalt anzubieten hat und
guckt sich nach anderen Projekten mit relevantem Inhalt um,
nachdem man sich ein wenig darüber geärgert hat, mit solch
defektem Zeug mal wieder seine Zeit verschwendet zu haben ;o)
Da aber nach einer Untersuchung von goggle das internet zu
mehr als 95% aus fehlerhaftem Müll besteht, ist es nicht so
überraschend, als Nutzer auch wirklich regelmäßig auf solchen
Müll zu stoßen. Mit der Zeit entwickelt man da einen sehr
selektiven Blick und der Müll wird kaum noch wahrgenommen,
weil man solche Seiten einfach gar nicht erst nutzt, denn übrig
bleiben eben dann doch oft mit größerer Wahrscheinlichkeit
Seiten, die wirklich irgendwelchen Inhalt haben und funktionieren,
daher ist das schon mal ein grober Qualitätsfilter, wenn man js
per Voreinstellung deaktiviert …
Noch stärker filtern kann man bei Bedarf, wenn man auch noch
CSS und Bilder deaktiviert - was dann zumindest als
(X)HTML-Dokument keine sinnvolle Ausgabe liefert, taugt wohl
eher auch nichts…

sry, aber mich nervt dieses “gelabere” von semantischem code und benutzerfreundlichen seiten ohne js ziemlich… ich programmiere selbst in xhtml strict mit semantischem code und auch soweit es geht ohne js - aber ich beharre nicht darauf, dass andere das genauso machen. solche posts helfen doch niemandem?!

ich gehe jede wette ein, dass der autor bestimmt schon davon gehört hat - also was bringt es, ihm das nochmal zu sagen? außerdem sollte man entstandenen fortschritt nutzen und nicht an alten sachen festhalten nur weil einige nutzer noch was altes nutzen. ich mein - geschäfte verzichten doch auch nicht auf kartenzahlmöglichkeit nur weil einige kunden keine karte haben. sie bieten mehrere möglichkeiten an, damit keiner benachteiligt wird - und das sollte man beim web auch so machen…

lg

[quote=“thorr”]sry, aber mich nervt dieses “gelabere” von semantischem code und benutzerfreundlichen seiten ohne js ziemlich… ich programmiere selbst in xhtml strict mit semantischem code und auch soweit es geht ohne js - aber ich beharre nicht darauf, dass andere das genauso machen. solche posts helfen doch niemandem?!

ich gehe jede wette ein, dass der autor bestimmt schon davon gehört hat - also was bringt es, ihm das nochmal zu sagen? außerdem sollte man entstandenen fortschritt nutzen und nicht an alten sachen festhalten nur weil einige nutzer noch was altes nutzen. ich mein - geschäfte verzichten doch auch nicht auf kartenzahlmöglichkeit nur weil einige kunden keine karte haben. sie bieten mehrere möglichkeiten an, damit keiner benachteiligt wird - und das sollte man beim web auch so machen…

lg[/quote]
gut gebrüllt löwe :smiley:
ich würde das ganze so organisieren dass es mit js geht aber auch ne alternative für html junkies bleibt :smiley:

Und wo hätte ich jemals geschrieben, dass alle das machen sollen, was ich tue?
Ich bringe die Leute lieber dazu, selber nachzudenken und Alternativen zu finden.

Ach, echt jetzt?
Nun, solange der wichtigste Besucher, den eine Webseite haben kann, blind ist und ohne JavaScript-Unterstützung kommt (richtig: ich rede von google & Co.) - genausolange werde ich meine Seiten barrierearm halten.
Oder meinst Du ernsthaft, es wäre ein Zufall, dass “Barrierefreiheit” und “Usability” gerade jetzt, zu “Web2.0”-Zeiten, immer wichtiger werden?

Schön, dass Du mir Recht gibst :wink:
Denn, um bei Deinem Beispiel zu bleiben: wenn ich eine Navigation erstelle, die nur mit JS (richtig) funktioniert, dann wäre das genauso, als ob ein Geschäft ausschließlich Kartenzahlung anbietet und auf den “Rest” der Kunden pfeift.
Ach so, Du meinst also, das kommt nicht vor…?
Oh doch, in unglaublich hoher Zahl - im Internet.
Flash-Seiten und JavaScript-Navigationen sind da nur die Spitze eines großen Eisberges.

“Damit keiner benachteiligt wird” - was heißt das denn?
Richtig: valides HTML, gepaart mit semantisch korrektem Code und eben möglichst barrierefrei… irgendwie bestätigst Du mit jeder Deiner Aussagen meinen Standpunkt…

Um zum Thema zurückzukommen: eine “Ausklapp-Navigation” lässt sich aus den genannten Gründen besser mit XHTML und CSS und eben ohne JS realisieren.

PS: Shift-Taste kaputt? :wink:

Naja, ganz erlich ists mir egal ob die Leute die kein JS an haben dann benachteiligt werden.

Diese Sprache gibts nun einmal und sie ist da hergenommen zu werden.

Damit kann man halt einige Sachen “schöner” machen.

Der eine nutzt es der andere nicht.
Kein Grund zu streiten.

MfG, andi

Bin auch der Meinung, wer meint kein JavaScript zu brauchen der darf sich auch nicht beschweren, dass er nichts sieht! Man kann nicht für jeden ne extra Wurst machen.

Wenn du keinen Führerschein hast wunderst du dich doch auch nicht das du kein Auto fahren darfst!? :astonished:

Und soweit ich weiß gibt es auch Addons für den Firefox die für jede Seite einzeln speichern können ob JavaScript benutzt werden soll oder nicht.

=> Also stell entweder dein JavaScript ein oder beschwer dich nicht noch :stress:

Bei mir sieht man immer was, ob mit oder ohne Javascript. Mit Javascript kann man die Boxen nur zuklappen, auf sind sie standardmäßig.

Aufklappen von Links in der Navi ist nur in den wenigsten Fällen sinnvoll. Ich würde mir lieber eine bessere Strukturierung der Navi überlegen, sodass man das Aufklappen sparen kann.

Ich halte es nicht für sinnlos, immer wieder darauf hinzuweisen,
daß gewisse Anwendungen problematisch sind, solange es noch
Autoren gibt, die sie so nutzen, daß ihre Seiten dann nicht mehr
funktionieren oder blödsinnig funktionieren.

Und bei (X)HTML ist nunmal per Definition der vom Autor
beabsichtigte Inhalt jener, den man vorgesetzt bekommt, wenn
man alle dekorativen Sachen abschaltet, also java-script, plugins,
CSS, Pixelgraphik etc
Wenn dann nichts mehr übrig bleibt oder das Verbleibende
keinen inhaltlichen Sinn ergibt, ist das die dokumentierte Absicht
des Autors (was für den Autor sehr peinlich sein kann, wenn er
damit als indifferenter Idiot dasteht ;o)
Wenn man mit aktivierten java-script, plugins, CSS, Pixelgraphik
einen (anderen) Sinn zu erkennen meint, so ist man von
dekorativen Belangen getäuscht worden.

Zum Sinn oder Unsinn von java-script selbst - nun, seit das
irgendwann im letzten Jahrtausend von netscape erfunden wurde,
ist es ein strittiger Punkt, weil es damals wie heute immer wieder
Sicherheitsprobleme bei den Implementierungen gibt und die
browser damit auch signifikant instabiler laufen, besonders bei
fehlerhaften Skripten. Das wurde zwar im Laufe der letzten 10
Jahre deutlich verbessert, ist aber eine Illusion zu glauben, daß
diese Probleme auch nur bei irgendeinem browser endgültig
gelöst sein, dafür erforder der Kram enorm viel Zeit in der
Umsetzung (Realisierung eines DOM), die man anderweitig bei
den browser-Anbietern sinnvoller für Formate mit Inhalt hätte
nutzen können, denn für Dekoratives ist CSS eindeutig das
bessere und einfachere Konzept und für Animation ist das
deklarative Konzept von SMIL eindeutig zugänglicher, sicherer,
stabiler und einfacher für Autoren.
Was als sinnvolle Anwendung bleibt (was eher nicht
(X)HTML-Dokumente betrifft) - sind massiv interaktive
Anwendungen in lokalen Netzwerken mit bekannter software und
bekannten Autoren,
Insofern hat java-script oder besser ecma-script durchaus eine
Existenzberechtigung. Die allermeisten Autoren wenden es nur
komplett falsch an oder an den falschen Stellen, weil das einfach
nervt und bedenklich ist, täte ich immer noch jedem wie vor 10
Jahren empfehlen, das auf unbekannten, öffentlichen
internet-Seiten generell deaktiviert zu lassen - das erlaubt einen
höheren Genuß des internets mit weniger Ärger und Problemen,
die einen gar nicht interessieren.
Für solche Anwendungen, die angeblich sinnvoll sind und oft auch
unter AJAX laufen, fehlt ein deklaratives Konzept ohne
Skriptsprache, solange es das nicht gibt und durchgänig und
einheitlich implementiert ist, ist AJAX auch allenfalls im lokalen
Netzwerk brauchbar, sonst macht es vor allem nur eines:
Zusätzliche Arbeit, wenn man das Projekt inhaltlich sinnvoll
umsetzt, also so, daß es wie oben beschrieben inhaltlich einen
Sinn ergibt, was möglich ist, bei realen Projekten aber oft nicht
der Realität entspricht.

Fortschritt oder nicht - das ist immer eine Frage der Perspektive,
was Fortschritt oder Rückschritt ist. Eine Verschlechterung der
Zugänglichkeit zur Information ist für mich ein Rückschritt immer
dann, wenn mich die Information interessiert. Es ist ein Fortschritt,
wenn die Information unsinnig, falsch oder verwirrend ist - nur
warum sollten von solchen Barrieren nur die profitieren, bei den
java-script deaktiviert ist, während die anderen Opfer der
Desinformation sind. Ist die Relevanz von Information davon
abhängig, welche technischen Anwendungen beim browser
verfügbar sind? Ich denke in der Regel nicht. Daher sollte auch
die Zugänglichkeit nicht davon abhängen, was die Grundidee von
(X)HTML ist. Wem die Grundidee schon nicht gefällt, der sollte
wohl besser gleich ein anderes Format mit diffuseren Ansprüchen
wählen ;o)

Die Diskussion geht wohl ein wenig am Thema vorbei. Ob Sinnvoll oder nicht:

<script language="javascript" type="text/javascript">
var i = 0;

function doit() {
var ausklappinterval = setInterval("klappaus()", 5);
}

function klappaus () {
document.getElementById("ausklappbar").style.top = i + "px";
if(i == 100) {
clearInterval(ausklappinterval);
}
i++;
}

function backit() {
var einklappeninterval = setInterval("einklapp()", 5);
}

function einklapp() {
document.getElementById("ausklappbar").style.top = i + "px";
if(i == 0) {
clearInterval(einklappeninterval);
}
i--;
}

</script> 

Diesen Javascript Script kopieren wir im “Quellcode”-Modus mit dem Editor auf eine beliebige Seite. Zum besseren Verständnis werde ich den Code kurz erklären, damit es leichter fällt ihn an eure Seite anzupassen.

Der Code beginnt mit der Initialisierung der Variable “i”. Diese spielt eine zentrale Rolle in der Animation unseres ausfahrbaren Bereiches.

In der Funktion “doit()” wird ein Interval aufgerufen, dass die Funktion “klappaus()” alle 5 Millisekunden aufruft.

Die Funktion “klappaus()” trägt dann den Wert der Varaible “i” in den -Tag des

-Tags mit der ID ausklappbar ein. Mit jedem Aufruf der Funktion wird “i” um 1 erhöht. Da diese Funktion von einer anderen Funktion aufgerufen wird, die sie alle Millisekunden startet, erreichen wir eine einfach Animation die einen Bereich ausklappt. Ist ein bestimmter Wert für den Abstand von oben erreicht, wird das Interval abgebrochen und der Bereich bleibt stehen.

Der rest des Codes macht genau das gegenteil und fährt den Bereich wieder ein.

So weit so gut. Alles was wir jetzt noch brauchen sind die Bereiche. Es handelt sich um

-Tags die unter dem Script notiert werden.

[code]


[/code]

In dem Beispiel wird die Funktion durch einen Button ausgelöst. Es wären aber auch Links denkbar. So könnte man zum Bespiel zwei kleine Pfeile benutzten um den Bereich ein und aus zu fahren.

Ohne die einfache Animation geht es auch kürzer.

[code]
function menupopup() {
document.getElementById(“menuelinks”).style.visibility = “visible”;
}

function menupopout() {
document.getElementById("menuelinks").style.visibility = "hidden";
}
</script>[/code]

Und der dazugehörige HTML-Code, wobei die erste

dann Teil symbolisiert der schon zu beginn zu sehen ist.

[code]

[/code]

Genauso könnte das jetzt ein Link mit dem onclick-Eventhandler sein.

Und um hoffmann zufrieden zu stimmen:

Hier gibt es ein Tutorial, dass eine reine CSS-Lösung erklärt. Eigentlich für eine Tooltip, aber das Prinzip ist ja das selbe.

der-webdesigner.net/tutorial … /241-.html

wenn sich hier schon so über sinn und zweck von javascript gezangt wird, da einige es eh nicht aktiviert haben, und man es somit nicht benutzen sollte, LOHNT ES SICH DANN ÜBERHAUPT, ES ZU LERNEN?!?

Vielleicht ja auch ne CSS Lösung:

[code]

Imageboard

html, body {
font-family:sans-serif;
font-size:14px;
}

div.menu {
position:absolute;
width:200px;
border-top:1px solid black;
border-right:1px solid black;
border-bottom:1px solid black;
top:50px;
left:-180px;
background-color:#800000;
color:#FFFFFF;
height:200px;
}
div.menu:hover {
left:0px;
}

div.menuhide {
width:20px;
margin-left:180px;
text-align:center;
background-color:#000080;
color:#FFFFFF;
height:inherit;
vertical-align:middle;
font-family:monospace;
font-weight:bold;
}

div.menulink {
width:180px;
float:left;
}

Startseite
Forum
Impressum
M
E
N
U
[/code] Getestet im Firefox 3, Opera 9.5 (funktioniert) Im IE7 Funktioniert es leider nicht, aber war ja zu erwarten.

mfg Balmung

Das ist nun wieder übertrieben.
Ich habe immer nur von der Verwendung in der Navigation abgeraten - auf dem Rest einer Seite ist JS mitunter sinnvoll und, richtig eingesetzt, sogar für die Usability förderlich.

Da stellt sich dann die Frage, in welcher Weise sich die Nutzer mit
deaktiviert oder nicht verfügbarer Skriptinterpretation von jenen
unterschieden, die des aktiviert und verfügbar haben.
java-script kann für letztere Gruppe eine Verbesserung der
Zugänglichkeit darstellen, wenn man bei denen Defizite oder
Benachteiligungen identifizieren kann, die die anderen nicht haben
oder von denen diese nicht betroffen sind.
Wenn man solch eine Situation identifizieren kann, hat man eine
sinnvolle Anwendung von java-script gefunden. In dem Moment
lohnt es sich auch sicher java-script zu lernen, um es innerhalb
von (X)HTML-Dateien anzuwenden.

Wenn die Anwendung von java-script hingegen dazu führt, daß
der ersten Gruppe Information vorenthalten bleibt oder schlechter
zugänglich oder verständlich ist als der 'js-'Gruppe, hat man
seine Zeit schlecht investiert und hätte sie effektiver dazu nutzen
sollen, die Information für alle besser, verständlicher,
ergonomischer aufzubereiten ;o)

Weitere sinnvolle Anwendungen von java-script gibt es in lokalen
Netzwerken, wo man weiß, daß alle Nutzer java-script in gleicher
Weise verfügbar haben, etwa weil es in dem lokalen Netzwerk
von vorne herein keine Bedenken gegenüber den verwendeten
Skripten gibt, die ausgiebig auf das lokal verwendete
Darstellungsprogramm hin ausgetestet wurden.
Da kann man damit massiv interaktive Anwendungen erstellen,
wobei sich da die Frage stellt, ob man das in einem lokalen
Netzwerk nicht anders effektiver lösen kann, aber das ist dann
immer eine Frage der jeweiligen Problemstellung und der
Kenntnisse der Leute, die an dem Problem arbeiten.
Die Erfahrung ist, daß bereits in so einer heterogenen und
offenen Struktur wie einer einzigen Universität nicht mehr davon
ausgegangen werden kann, daß man die Voraussetzungen an
universeller Nutzbarkeit erreichen kann.