aufklappbare Texte

html.de-Forum HTML, XHTML & CSS
1

Hallo,
ich möchte gerne bei meiner Webseite Texte, die Auf-und Zuklappen, wenn man draufklickt. Ich habe jetzt folgendes geschrieben:
[HTML]

                    <span onclick="document.getElementById('one').style.display='block';document.getElementById('an').style.display='none';document.getElementById('zu').style.display='block'" id="an" style="cursor: pointer;"><h3>
                    Autobau
                    </h3></span>
                    <span onclick="document.getElementById('one').style.display='none';document.getElementById('an').style.display='block';document.getElementById('zu').style.display='none'" id="zu" style="display: none; cursor: pointer;"><h3>
                    Autobau
                    </h3></span>
                        <div id="one" style="display: none;">
                            <p>Die Kinder können je ein eigenes Auto bauen, welches sie natürlich behalten können.
                            </p></div>
                            </div>

[/HTML]

Das klappt auch alles ganz gut. Wenn ich das aber nochmals analog einfüge:
[HTML]



Robi Roboter




Robi Roboter

Die Kinder basteln einen kleinen Roboter aus verschiedenen mechanischen und elektronischen Teilen.



[/HTML]

Geht der aber beim zweiten Draufklicken doch nicht zu. Warum? Ist doch das selbe… Verstehe ich nicht. Kann mir das jemand erklären, oder mir einfach die Lösung verraten? Bitte…
Vielen Dank.

2

Hallo,

Auf jeder html-Seite müssen die id eindeutig sein, dürfen also nur einmal vorkommen. Die id „an“ und „zu“ dürfen also nur einmal vorkommen.

Eventuell gibt es auch Probleme mit gleich benannten Variablen.

Wenn du alle „an“ und „zu“ in dem div mit der id=„two“ zum Beispiel durch „ban“ und „bzu“ ersetzt (einfach, damit sie anders bezeichnet sind) funktioniert der Accordeon-Effekt.

Im Endeffekt ist es aber sinnvoller, den für das Accordeon zuständige Code nur einmal als JavaScript Anweisung zuschreiben und nicht durch ständige Wiederholung den Quelltext zuzumüllen. Zudem kannst du dann auf unterschiedliche id verzichten.

Außerdem hat deine Lösung kein Fallback bei blockiertem JavaScript. Dann sind die Informationen in den Klappfeldern nicht aufzurufen.

Weiterhin enthält dein Quelltext sachliche Fehler. So darf sich ein h3-Element nicht innerhalb eines span-Elements befinden.

Gruss

MrMurphy

3

Vielen Dank, MrMurphy!!
Ja, das mit dem „an“ und „zu“ macht Sinn, hätte mir auch einfallen können.
Mein Problem ist noch, dass ich einfach noch so wenig weiß… Ich würde es echt liebend gerne nur einmal als JavaScript Anweisung schreiben, muss jetzt dann herausfinden, wie man das macht.
Auch der Hinweis mit dem Blockiertem JavaScript ist sehr gut, habe da überhaupt nicht dran gedacht.
Werde mich weiterhin mit span-Elementen beschäftigen.
Aber wenn Du (oder jemand anders) Lust hat, mir noch was über genau diese Dinge zu erklären, oder mir zeigen kann, wie ich es nur einmal als JavaScript Anweisung schreibe, wäre da natürlich bombastisch!
Vielen Dank nochmal!!

4

Aber wenn Du (oder jemand anders) Lust hat, mir noch was über genau diese Dinge zu erklären, oder mir zeigen kann, wie ich es nur einmal als JavaScript Anweisung schreibe, wäre da natürlich bombastisch!

Mit jQuery lässt sich das in 3 Zeilen umsetzen:
http://jsfiddle.net/4MpqZ/14/

5

Hallo,

Mein Problem ist noch, dass ich einfach noch so wenig weiß…

Du wirst nicht darum herumkommen die Grundlagen zu lernen. Zu HTML5 / CSS3 ist mir noch keine vernünftige Informationssammlung im Internet begegnet, die zudem Anfängern gerecht wird.

Aber wenn Du (oder jemand anders) Lust hat, mir noch was über genau diese Dinge zu erklären,

Das dürfte in Foren schwierig werden, zumal die Informationen ganze Bücher füllen. Zur Zeit empfehle ich das Buch „Flexible Boxes“ von Peter Müller, das bei GalileoPress erschienen ist.

mir zeigen kann, wie ich es nur einmal als JavaScript Anweisung schreibe

Verabschiede dich davon alles selbst schreiben zu wollen. Lösungen gibt es bereits zu hunderten frei im Internet. Die kann man in der Regel auch einfach anpassen und viele Schwierigkeiten, an die man nicht denkt, sind bereits berücksichtigt.

Der Accordeon-Effekt, den ich mir zusammengesucht habe, berücksichtigt zum Beispiel folgendes:
[ul]
[li]Fallback: Wenn ein Besucher JavaScript blockiert hat werden ihm alle Informationen geöffnet angezeigt, er wird also nicht benachteiligt und kann die Seite voll nutzen[/li]
[li]Jedes Accordeonfeld kann einzeln geöffnet und geschlossen werden[/li][li]Somit können auch alle Accordeonfelder geschlossen werden und es muss keines zwanghaft offen bleiben[/li][li]Beim Öffnen und Schließen verschiebt sich die angeklickte Schaltfläche nicht, außer es geht technisch wegen dem Abstand nach oben oder unten nicht anders, so dass der Besucher sie nach der Betätigung nicht erst wieder suchen muss. Das ist grade wichtig wenn die Inhalte etwas länger werden. Ganz schlimm wird es, wenn die Schaltflächen aus dem Blickfeld geraten und durch Scrollen erst wieder gesucht werden müssen[/li]
[li]Die Elemente der Schaltflächen und der Accordeonfelder können einfach im Script geändert werden[/li][li]In die Accordeonfelder können fast alle HTML-Elemente eingefügt und per css gestaltet werden, also auch Bilder oder Listen[/li]
[li]Das Accordeon kann geschachtelt werden[/li][li]Für Mausbenutzer gibt es als Bonus einen Hover-Effekt, bei dem der Inhalt der Accordeonfelder angezeigt wird. Touchscreenbenutzer haben dadurch aber keinen Nachteil, da der Effekt zur Benutzung der Seite nicht erforderlich ist[/li]
[li]Es ist nur ein umfassendes Element für die Accordeon-Funktion erforderlich, im Quelltext des Accordeons selbst sind keine Klassen mehr nötig, so dass der Quelltext für den Seitenersteller übersichtlich und leicht pflegbar bleibt[/li][/ul]
http://foreninfo.bplaced.net/seiten_fremdseiten/2014_02_01_janesey_01.html

Gruss

MrMurphy

6

@Murphy

Das ist jetzt aber nicht besser als mein Ansatz mit 3 Zeilen, und zu einem Akkordeon gehört ja auch, dass sich alle Container mit Ausnahme des angeklickten wieder schließen. :wink:

7

Danke, MrMurphy und Tronjer, für Eure Javascripte. Ich fand das von Tronjer schöner (erschien mir einfacher) habe es aber nicht geschafft, das in meine Webseite einzupflegen. Das von MrMurphy hat geklappt. Allerdings macht iE 8 bei Dingen wie Main, Section und Article nicht mit. [SIZE=3](Was genau ist das überhaupt? Bin noch beim googlen, aber bisher nicht (viel) schlauer geworden.Arbeite aber dran…)[/SIZE] Kann man Main, Section und Article da irgendwie umgehen? (Bzw. zumindest in iE8 dann den Curser nicht als Link-Curser erscheinen lassen. Aber auf allen anderen natürlich schon!)
Außerdem würde ich gerne auf einer anderen Seite von mir einen Link setzten, der diese Seite (die mit dem Akkordeon) mit dem einen Ding gleich geöffnet läd. Geht das irgendwie? Wie sieht dann der Link aus?
Vielen Dank und viele Grüße

P.S.: Ich habe auch MrMurphys genommen, weil ich es mag, dass es sich eben NICHT mehr schließt, so dass man alle offen haben kann, wenn man möchte.

8

Bin villeicht etwas spät, aber hier wäre eine Möglichkeit, das ganze ohne JavaScript, sondern mit CSS zu machen.

Villeicht nützt es dir ja was. Wenn nicht, dann villeicht irgendwann einem googlenden mal.

9

[SIZE=3]Sehr schön, die Methode ohne Javascript.
Allerdings habe ich da ein paar Probleme/Fragen:[/SIZE]
[INDENT][SIZE=3](jaja, wer lange sucht findet manchmal doch eine Lösung (wenn man endlich hersuafindet, wie man das Problem auch noch formulieren kann… Hier die Lösungen einiger meiner Fragen, vielleicht ist ja noch jemand so kompliziert wie ich und findet hier die Lösung schneller)[/SIZE][/INDENT]
[SIZE=3]
-Wenn ich mehrere untereinander mache, sind sie im nicht aufgeklappten Fall so „komisch versetzt untereinander“. Das sich beim aufklappen der Aufklapptext nach rechts eingerückt ist, finde ich toll. Aber das die nächste Überschrift auch so eingerückt ist (und damit auch der Aufklapptext doppelt eingerückt) ist doof. Wie bekomme ich das hin?[/SIZE]
[INDENT][SIZE=3]–>Habe ich zufällig hinbekommen, indem ich einfach ein Bild oberhalb von <label for="click einfügt habe, welches dann rechts neben der Überschrift erscheint und dann die nächste Überschrift in die nächste Zeile setzt (warum auch immer…)[/SIZE][/INDENT]
[SIZE=3]-Wie kann ich bei einem Nicht-Link (wie die Überschrift der einzelnen Blöcke) ein hover-Ding (per CSS) machen? (Diese Frage ist eigentlich eine generelle Frage)[/SIZE]
[INDENT][SIZE=3]–> [HTML]

Überschrift

[/HTML]
bzw. im CSS #container h3 { width: 258px; cursor:pointer;}[/SIZE][/INDENT]

[SIZE=4]
Bleiben aber noch zwei wichtige Frage:
-Kann ich damit ein geöffnetes Feld linken?
-Kann ich es auch im Internet Explorer 8 zum laufen bekommen?
Vielen Dank![/SIZE]

10

-Wenn ich mehrere untereinander mache, sind sie im nicht aufgeklappten Fall so „komisch versetzt untereinander“. Das sich beim aufklappen der Aufklapptext nach rechts eingerückt ist, finde ich toll. Aber das die nächste Überschrift auch so eingerückt ist (und damit auch der Aufklapptext doppelt eingerückt) ist doof. Wie bekomme ich das hin?

Ich weiß nicht genau, was du damit meinst, aber definiere die Überschrift doch mal so:
[HTML]

Meine Ueberschrift

[/HTML]
Dann dürfte sie nicht mehr „komisch versetzt“ sein.

-Wie kann ich bei einem Nicht-Link (wie die Überschrift der einzelnen Blöcke) ein hover-Ding (per CSS) machen? (Diese Frage ist eigentlich eine generelle Frage)

Gebe zuerst der Überschrift eine Klasse, also so:
[HTML]

MeineUeberschrift

[/HTML]
Dann kannst du in CSS z.B. folgendes schrieben:

h1.klasse1 {color:#FF0000;} h1.klasse1:hover {color:#FF00FF;} h1.klasse1:active {color:#0000FF;}

-Kann ich damit ein geöffnetes Feld linken?

Kann sein, dass ich heute auf der Leitung stehe, aber ich bin mir wieder nicht sicher, was du hiermit meinst. Einen Link kannst du imverstecktem Feld wie gewohnt einfügen, wenn es das ist, was du meinst.

-Kann ich es auch im Internet Explorer 8 zum laufen bekommen?

Ich bezweifele, dass frühere Versionen vom IE mit CSS so richtig klarkommen. Aber deswegen würde ich mir nicht zuviele Gedanken machen. Denn der Support von XP läuft in 2 Monaten aus, so dass IE 6 & 7 glaube ich sowieso schon so gut wie verschwunden sind. Und mit Vista wir dann auch der IE 8 in spätestens 3 Jahren verschwunden sein. Aber du kannst ansich nichts daran ändern, dass Microsoft früher Mist gebaut hat. Finde dich einfach damit ab,warte ein paar Jahre,rechne mitder Intelligenz der PC-Nutzer nicht den IE 8 zu benutzen und schreibe ansonsten einen Warnhinweis, dass deine Seite mit IE-Version 1-8 nicht kompatibel ist.

==>Du kannst den Script ja mal im IE 8 testen, ich bin mir nämlich ziemlich sicher, dass wenn Version 8 den Code nicht zu interprärieren weiß, dass dann der Text, der sich im versteckten Feld befindet, sowieso angezeigt wird. Für den Rest sind es die Verbraucher von Microsoft-Software sowieso gewohnt, mit Mist umgehen zu müssen.

[SIZE=5]EDIT: Habe jetzt erst bemerkt, dass die ersten beiden Fragen ja schon von dir selbst beantwortet wurden. Einfach igniorieren.[/SIZE]:smiley:

11

Vielen Dank für die Antworten. Ist auch nicht schlecht, noch einen anderen Lösungsweg zu sehen, meins ist manchmal einfach nur Gefrickel, was dann zufälligerweise das gewünschte Resultat bringt.
Ich versuche immer eine Weile (1 oder 2 Stunden gestern) mein Problem durch eigenes Recherchieren zu lösen und wenn das nix bringt frage ich ggf. halt. Und natürlich geht mir das Problem auch nicht aus dem Kopf und falls ich es dann doch selbst löse, schreibe ich es hier, damit vielleicht noch jemand anders von profitieren kann.

Ich meine damit, dass ich auf meiner Hauptseite einen Link setzen möchte, der mich dann gleich zu der Seite mit dem speziellen geöffneten Feld bringt. Die anderen sollen zu sein, das eine aber offen. So wie man ja auch Links machen kann, die in der Mitte einer Seite führen.

12

Hmm… Du könntest versuchen, die ID hintenran zu hängen, also wenn du folgende Codezeilen hast:
[HTML]
#container {
height: 20px;
overflow: hidden;
margin-bottom: 10px;
}

#click:checked ~#container {
height: auto;
}
Klicken zum Öffnen

Hier drin steht ganz viel Text.
Er ist verteilt auf mehrere Zeilen,
die erst dann sichtbar sind,
wenn auf den Text geklickt wurde.
[/HTML]

Dann müsstest du ihn normalerweise über den Link

http://www.meinedomain.tld/meine-seite.html#container

Also mit dem Anhängsel der ID, in diesem Falle also „#container“. Ich bin mir allerdings nicht sicher, ob der versteckte Container dann aufgeklappt ist. Ansonsten kannst du deine Frage ja noch mal in der Rubrik Javascript stellen. Ich bin mir nämlich ziemlich sicher, dass sich das irgendwie mit JS lösen lässt.

13

Hi, danke für den Tipp, allerdings klappt sich der Container leider nicht auf. Außerdem verhält es sich (wahrscheinlich durch die Container) so, dass es immer einen Absatz tiefer ist, also der Container gerade nicht mehr sichtbar ist. Dies ist aber egal, da der Container sich da sowieso nicht selbst aufklappt. (Schade.)

14

Schade, meine Webseite soll ja heutzutage laufen und nicht erst in 3 Jahren… Gibt es ne Möglichkeit, dass der IE 8 die Seite dann einfach ohne Ausklapp-Schnickschnack anzeigt? Danke.

15

Müsste er doch normalerweise. Hast du schon versucht, die Webseite unter IE8 zum Laufen zu bringen? Ich fände es nämlich ziemlich seltsam, wenn er den Befehl zum verstecken versteht, den zum aufklappen jedoch nicht. Falls der IE 8 (aus was für einem Grund auch immer) wirklich so handelt, dann kannst du ja immer noch den useragent-string mittels PHP auselesen und bei IE8 entweder auf eine Seite ohne all den Schnick-schnack weiterleiten, oder aber einfach einen Hinweis einblenden, dass der benutzte Browser nicht unterstützt wird. Alle Strings vom IE 8 findest du hier.
Ich empfehle dir den String folgenderma▬5en zu durchsuchen:
[PHP]<?php
$browser = $_SERVER[‚HTTP_USER_AGENT‘];

if ($browser contains 'MSIE8.0;') {
    echo 'Browser wird nicht unterstuetzt';}
else {echo "Browser wird unterstuetzt";}

?>[/PHP]
Irgendwie so in der Art.

16

Klar…

Geht aber nicht, da ich es im css ja durch

#containereins { height: 0px; overflow: hidden; margin-bottom: 10px;} #clickeins:checked ~#containereins { height: auto;}
steuere, und dann der erste Befehl verstanden wird, der zweite aber nicht.

Ich werde dann man

. Leider kenne ich mich mit PHP noch weniger aus… Aber dann wird mir wenigstens nicht langweilig :wink: sarkastisch grinsend

17

Hallo MrMurphy, ich habe ein Script in dem man nur ein Inserat veröffentlichen kann wenn man ein Bild hoch lädt.Kann ich das ändern damit es auch ohne eintrag von einem Bild geht…Gruß Sunkal…Email:Sunkal@gmx.net

anbei der code wenn dumir helfen kannst:::

Telefonnummer
Zusätzliche Angaben 
 <div style="float:left; clear:both; padding-bottom:0px;">
 <div style="float:left; width:120px; padding-top:4px;"><b>Bild</b></div>

 <div style="float:left; clear:both; padding-bottom:0px;">
 <div style="float:left; width:120px; padding-top:4px;"><b>Bild 2</b></div>

 <div style="float:left; clear:both; padding-bottom:0px;">
 <div style="float:left; width:120px; padding-top:4px;"><b>Bild 3</b></div>

 <div style="float:left; clear:both; padding-bottom:0px;">
 <div style="float:left; width:120px; padding-top:4px;"><b>Bild 4</b></div>

 <div style="float:left; clear:both; padding-bottom:0px;">
 <div style="float:left; width:120px; padding-top:4px;"><b>Bild 5</b></div>

 <div style="float:left; clear:both; padding-bottom:15px;">
 <div style="float:left; width:120px; padding-top:4px;"><b>Bild 6</b></div>
Beschreibung 
 <div style="float:left; clear:both; padding-bottom:15px;">
 <div style="float:left; width:120px; padding-top:4px;"><b>Anzeigetext<font style="color:#9bcd32;">*</font></b></div>
Veröffentlichen Sie Ihre Anzeige
18

Das heist ich soll selber schauen wie ich damit zurecht komme???

19

Hallo, ich weiß, dass dieser Beitrag bereits ein paar Jahre her liegt, aber ich wollte nachfragen, wie ich bei einem accordion code das Wort, das den restlichen Text öffnen bzw. schließt als fett hervorhebe? Z.B. so wie bei dem Teil des codes, das Wort ‚mehr‘
mehr zu

Vielen Dank für Eure Antwort

20

Hallo , erstmal vielen Dank für Deine schnelle Antwort, nur um sicher zu gehen, da ich ein Leie bin-

es würde dann so ausschauen: ? Vielen Dank für die Bemerkung am Rande, LG

id=„an“
{
font-weight: bold;
}

mehr <span onclick=