Hilfe bei Javascript

wuaschtsalod · 06/16/2012, 11:21

Hallo Com,

ich bin derzeit am basteln einer Homepage und jetzt geht es an den Feinschliff

Ich habe eine News Seite gebaut auf der wie ja der Name schon sagt Neuigkeiten zu sehen sind. Aber wenn der User jetzt auf diese Seite geht, soll er nicht die vollständigen News sehen sondern nur einige Wörter, zum vollständigen lesen soll er auf Pfeile klicken die dann den ganzen content ausklappen. Natürlich sollen sich die News auch wieder einklappen lassen können und was auch sehr schön wäre, wenn man eine News offen hat und eine zweite aufmacht, die erste sich selbst schließt (also nur immer eine Neuigkeit offen sein kann

)

Ich bin derzeit auf diesem stand:

HTML Code:

<html><head><title>Test</title>
<style>
	#content{
		position: relative;
		width: 370px;
		padding: 5px;	
		border-right: 2px solid #D8D8D8;
		height: 120px;
		overflow: hidden;
	}
	#arrows {
		position: relative;
		width: 11px;
		height: 14px;
		border: 0px;
		background-image: url(up.png);
	}
</style>
	<script type="text/javascript">
		function Overflow () {
		  document.all.content.style.height = "auto";
		  document.all.arrows.style.backgroundImage = "url(down.png)";
		}
	</script>
</head>
<body>	
	<a  href="javascript:Overflow()"><img alt="up" id="arrows"></img></a>
	<div id="content">
		<h3>Neuigkeit - New</h3>
		<h5>09.06.2012</h5>
		<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
	</div>
</body></html>

aber so richtig gefällt mir die methode auch nicht :/

Vielleicht kann mir ja einer von euch weiterhelfen...
Ich wäre sehr dankbar!

Schonmal jetzt DANKE für eure Hilfe! Ich hoffe ich hab mich klar genug ausgedrückt, falls nicht kann ich auch noch schnell ein paar Screenshoots machen!

Danke,
wuaschtsalod

boxxiebabee · 06/16/2012, 23:00

Dafür brauchst du Javascript. Am besten schau dir in JQuery die Funktion toggle an.

~~Doste~~ · 06/17/2012, 09:50

Das ist mit jQuery viel einfacher.

HTML Code:

$('#id').click(function(){
    $(this).slideToggle(300);
});

Weiss nicht ob ich es richtig geschrieben habe aber so in etwa