Wie bekommt man das hin? Bitte um Hilfe, Anleitung, Tutoral, Vielen Dank

A

akrenn

Mitglied
Hallo an alle User,

ein Herzliches Grüßgott. Ich habe was gefunden was mir sehr gefällt, weis aber nicht wie ich es hinbekomme.

Im Test1 File sieht man den Zustand vor dem Klicken.

Im Test4 File sieht man das nach Klicken ein Text wie bei einem Accordion rauskommt.

Im Test2 File sieht man wie es dann aussieht nach dem Klick, die Schrift hat eine andere Farbe.

Wie bekommt man soetwas hin, auch wenn man mehrere Überschriften hätte sodass man das nächste anklickt sich die eine schliest und die ander öffnet und die geschlossene auch den Zustand von Test2 hat!

Bitte um Hilfe! Bin ANfänger und finde das sehr gut gemacht!

Vielen Dank für eure Unterstützung, danke!

mfg akrenn
 

Anhänge

  • Test1.jpg
    Test1.jpg
    45,3 KB · Aufrufe: 17
  • Test2.gif
    Test2.gif
    2,9 KB · Aufrufe: 14
  • Test4.jpg
    Test4.jpg
    60,8 KB · Aufrufe: 16
Am Einfachsten wäre es, wenn Du ein JS-Framework nimmst, wie zB jQuery. Dort schaust Du mal in die Tutorials. Mit Sicherheit findest Du dort kein fertiges Script, aber die Einzelmodule sind dort ausführlich erklärt und mit Lust und Grips ist das an einem Wochenende geschrieben.

Links:
http://jquery.com/
Ändern von div-Inhalten per .html - http://api.jquery.com/html/
.slideToggle von Divs - http://api.jquery.com/slideToggle/

mfg chmee
 
Hallo, danke,

habe es nun soweit hinbekommen das ein Accordion funktioniert. Nun habe ich noch das Proplem, das ich es nicht in meine Webseite bekomme.

Das sind die Zeilen die ich im Html habe (Auszug):

HTML: 
<h8 class="service_title">XELAK</h8>
<div class="service_info">
<p>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.</p>

Mein Javascript:

Code: 
$ (document).ready (function()
	{
		$ ("div.service_info").hide();
		$ ("h8.service_title").click(function()
	{
		$("div.service_info").slideUp("slow");
		$(this).next("div.service_info:hidden").slideDown("slow");
	});
});

Nun möchte ich es hier einfügen:

HTML: 
<div class="oe_wrapper">
			<div id="oe_overlay" class="oe_overlay"></div>
			<ul id="oe_menu" class="oe_menu">
				<li><a href="">Willkommen</a>
					<div>
						<ul>
							<li class="oe_heading">XELAK GmbH</li>
							<li><a href="#">Wer ist die XELAK GmbH</a></li>
							<li><a href="#">Was macht die XELAK GmbH</a></li>
							<li><a href="#">XELAK GmbH und die Umwelt</a></li>
						</ul>
					</div>

Wie kann iche es schaffen dass ich die HTML Zeilen unter "Wer ist XELAK GmbH", "Was macht die XELAK GmbH" einfügen!

Bitte um Hilfe!

Danke akrenn

Ps: so sieht das Beispiel aus: http://tympanus.net/Tutorials/OverlayEffectMenu
Meines sieht ähnlich aus nur das halt die Untermenü anders sind!
 
Ich würde sagen einfach einfügen ;)
Und bist du dir sicher, dass es das Element h8 gibt?
HTML: 
<h8 class="service_title">XELAK</h8>
<div class="service_info">
<p>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.</p>
 
Ja, da Element gibt es h8, habe ich persönlich eingefügt! Einfach einfügen geht nicht sagt das man kein P und kein div unter ul und li setzen kann, wie löse ich das Problem?!

Danke euch alle für Lösungsvorschläge!

mfg akrenn
 
Laut SelfHTML darf man sogar ein P und DIV-Element in ein LI-Element packen.
Mein Google Chrome zeigt auch kein Fehler an, wenn ich sowas mache.
 
Wie bekommt man das hin? Bitte um H ...

Ein ganz einfaches:
HTML: 
<!doctype html[‚ˆXY‚ˆ]OÝ]@¢Âö†VCà¢Æ&öG“à¢ÇVÃà¢ÆÆ(€€€€€€€€ñ‘¥ØùÑ•ÍÐ𽑥Ø
      </liˆO‚ˆ\ÝÜ¢ÂöÆ(€€€€ð½Õ°ø(€€ð½‰½‘äø(ð½¡Ñµ°ø)l½¡Ñµ±
 
@ ComFreek, dankeaber das hilft nicht weiter verstehe ich nicht bitte eines das nach vollziehbar ist, danke, vielen Dank

mfg
akrenn
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück