✔ Bereich ein- und ausklappen

Status
Nicht offen für weitere Antworten.
M

Merlin732

Erfahrenes Mitglied
Hallo,

ich habe folgenden JS-Code, der einfach nicht laufen will!
Sinn soll es sein, dass man einen Bereich mittels einem Button ein und ausblenden kann.
Leider will der Code nicht so wie ich, daher hoffe ich auf jemand, der sich mit JS besser auskennt als ich.

Code: 
<head>
<script type="text/javascript">
function plus(nummer){
 document.images.elements["bereich"+nummer].src="http://devel.ha-cc.org/typo3conf/ext/user_ccsearch/images/minus.gif";
 document.getElementById("script").href = "javascript:minus(nummer);";
 document.getElementById("mehr").style.display='inline'; 
 }

function minus(nummer){
 document.images.elements["bereich"+nummer].src="http://devel.ha-cc.org/typo3conf/ext/user_ccsearch/images/plus.gif";
 document.getElementById("script").href = "javascript:plus(nummer);";
 document.getElementById("mehr").style.display='none';
}
</script>
</head>
<body>
	<a href="javascript:minus(0);" id="script"><img src="http://devel.ha-cc.org/typo3conf/ext/user_ccsearch/images/minus.gif" name="bereich0" border=0></a> 
	<span style="display: inline" id="mehr">
		Hello Welt;
	</span>
	<br>
	<a href="javascript:minus(1);" id="script"><img src="http://devel.ha-cc.org/typo3conf/ext/user_ccsearch/images/minus.gif" name="bereich1" border=0></a> 
	<span style="display: inline" id="mehr">
		Hello world
	</span>
</body>

Danke für jegliche Hilfe.
 
Kannst du das etwas erläutern bitte?

Code: 
<head>
<script type="text/javascript">
function plus(nummer){
 document.images.elements["bereich"+nummer].src="http://devel.ha-cc.org/typo3conf/ext/user_ccsearch/images/minus.gif";
 document.getElementById("script"+nummer).href = "javascript:minus(nummer);";
 document.getElementById("mehr"+nummer).style.display='inline'; 
 }

function minus(nummer){
 document.images.elements["bereich"+nummer].src="http://devel.ha-cc.org/typo3conf/ext/user_ccsearch/images/plus.gif";
 document.getElementById("script"+nummer).href = "javascript:plus(nummer);";
 document.getElementById("mehr"+nummer).style.display='none';
}
</script>
</head>
<body>
	<a href="javascript:minus(0);" id="script0"><img src="http://devel.ha-cc.org/typo3conf/ext/user_ccsearch/images/minus.gif" name="bereich0" border=0></a> 
	<span style="display: inline" id="mehr0">
		Hello Welt;
	</span>
	<br>
	<a href="javascript:minus(1);" id="script1"><img src="http://devel.ha-cc.org/typo3conf/ext/user_ccsearch/images/minus.gif" name="bereich1" border=0></a> 
	<span style="display: inline" id="mehr1">
		Hello world
	</span>
</body>

Meinst du eine Änderung in diese Richtung? (id sind geändert)
 
Zuletzt bearbeitet:
Eine ID muß in einem Dokument immer eindeutig sein, d.h. sie darf darin nur einmal vergeben werden / enthalten sein.

Hier eine Script-Variante als Lösungsvorschlag:

Code: 
<script type="text/javascript">
function toggle(id){

 var img = 'img_' + id;
 if(document.getElementById(id).style.display == 'none')
 {
  document.getElementById(id).style.display = 'inline';
  document.getElementById(img).src = 'minus.gif'; 
 }
 else
 {
  document.getElementById(id).style.display = 'none';
  document.getElementById(img).src = 'plus.gif'; 
 }

}
</script>
Code: 
<a href="#" onclick="toggle('layer1')"><img src="minus.gif" id="img_layer1" border="0" alt=""></a>
<span style="display:inline" id="layer1">
		Hello Welt;
	</span>

<a href="#" onclick="toggle('layer2')"><img src="minus.gif" id="img_layer2" border="0" alt=""></a>
<span style="display:inline" id="layer2">
		Hello world
	</span>
 
Habe noch ein ganz kleine Frage:
Ich habe jetzt den Quellcode von michaelsinterface so übernommen und alles funktioniert (fast so) wie es sollte. Das Einzigste was ich noch gern verändern würde ist, das wenn man die seite aufruft nur die "pluse" und eine kleiner vorschautext steht und wenn man draufklickt das dann erst der eigentliche Inhalt aufgeklappt wird.

Hab leider noch nicht gefunden was am code geändert werden soll, währe spitzenmäßig wenn mir jemand helfen könnte
 
Hi,

versuch es mal hiermit:

Code: 
function toggle(id){

 var img = 'img_' + id;
 if(document.getElementById(id).style.display == 'block') {
  document.getElementById(id).style.display = 'none';
  document.getElementById(img).src = 'plus.gif';
 } else {
  document.getElementById(id).style.display = 'block';
  document.getElementById(img).src = 'minus.gif';
 }

}
Code: 
a {
display:block;
text-decoration:none;
}

#layer1, #layer2 {
display:none;
}
Code: 
<a href="#" onclick="toggle('layer1')"><img src="plus.gif" id="img_layer1" border="0" alt=""> Vorschautext 1</a>
<div id="layer1">Hallo Welt 1</div>

<a href="#" onclick="toggle('layer2')"><img src="plus.gif" id="img_layer2" border="0" alt=""> Vorschautext 2</a>
<div id="layer2">Hallo Welt 2</div>
 
Ich habe jetzt lange mit den Codes von dir rumgetestet und es klappt noch immer nicht wie es sollte

Code: 
<script type="text/javascript">

function toggle(id){
 var img = 'img_' + id;
 if(document.getElementById(id).style.display == 'block') {
  document.getElementById(id).style.display = 'none';
  document.getElementById(img).src = 'plus.gif';
 } else {
  document.getElementById(id).style.display = 'block';
  document.getElementById(img).src = 'minus.gif';
 }}
a {
display:block;
text-decoration:none;
}

#layer1, #layer2 {
display:none;
}
</script>


<a href="#" onclick="toggle('layer1')"><img src="plus.gif" id="img_layer1" border="0" alt=""> Vorschautext 1</a>
<div id="layer1">Hallo Welt 1</div>

<a href="#" onclick="toggle('layer2')"><img src="plus.gif" id="img_layer2" border="0" alt=""> Vorschautext 2</a>
<div id="layer2">Hallo Welt 2</div>

Ich denke das ihrgendwas mit dem "Teil" nicht stimmt

Code: 
a {
display:block;
text-decoration:none;
}

#layer1, #layer2 {
display:none;
}

Wenn ich ihn weglasse dann funktionieren die "Pluse" aber der Text "Hallo Welt 1" wird beim Seitenaufruf schon angezeigt, es muss folglich also ihrgendwas an dem "Teil" das mit a anfängt was nicht stimmen aber ich weiß nicht was, da mir die Funktion "a" unbekannt ist...
 
Code: 
a {
display:block;
text-decoration:none;
}

#layer1, #layer2 {
display:none;
}
wird in einem Cascading Stylesheet (CSS) notiert und dient zur CSS-Formatierung der Elemente.

Ich zeig dir mal den vollständigen Quellcode der Seite:

Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title></title>

<script type="text/javascript">
function toggle(id){

 var img = 'img_' + id;
 if(document.getElementById(id).style.display == 'block') {
  document.getElementById(id).style.display = 'none';
  document.getElementById(img).src = 'plus.gif';
 } else {
  document.getElementById(id).style.display = 'block';
  document.getElementById(img).src = 'minus.gif';
 }

}
</script>

<style type="text/css">
<!--
a {
display:block;
text-decoration:none;
}

#layer1, #layer2 {
display:none;
}
-->
</style>

</head>
<body>

<a href="#" onclick="toggle('layer1')"><img src="plus.gif" id="img_layer1" border="0" alt=""> Vorschautext 1</a>
<div id="layer1">Hello Welt 1</div>

<a href="#" onclick="toggle('layer2')"><img src="plus.gif" id="img_layer2" border="0" alt=""> Vorschautext 2</a>
<div id="layer2">Hello Welt 2</div>

</body>
</html>
 
Maik, danke du hast mir wirklich weitergeholfen

kennst du gute javascriptseiten, die nicht unter "Keine Ahnung von Javascript" stehen?
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück