Utöka funktionaliteten hos denna kodsnutt

Patrik81Medlem sedan okt. 2001538 inlägg

Frågan13 sep. 2003 01:23#1

Hejsan, jag hittade denna biten kod på min hårddisk, och höll för en tid sedan på att peta lite i den, men fick det väl aldrig att fungera, men nu har den iaf. blivit lite intressant igen, men jag vet inte riktigt hur jag skall få till det.

<html>
<head>

<script language="javascript">
function showMore(varA1, varB1)
{
var123 = ('varXYZ' + (varA1));
varABC = ('varP' + (varA1));

if( document.getElementById ) {
if( document.getElementById(var123).style.display ) {
if( varB1 != 0 ) {
document.getElementById(var123).style.display = "block";
document.getElementById(varABC).style.display = "none";
} else { 
document.getElementById(var123).style.display = "none"; 
document.getElementById(varABC).style.display = "block"; 
}
} else { 
location.href = varB1;
return true; 
}
} else { 
location.href = varB1;
return true; 
}
}
</script>

</head>
<body>

<div class="entry">
<a name="#1"></a>
<span id="varP1"><a href="javascript:void(0);" onclick="showMore(1,'#1');return false;">Expandera denna flik</a></span>
<div id="varXYZ1" style="display: none">
<p>Lägg innehåll här</p>
<a href="javascript:void(0);" onclick="showMore(1,0);return true;">Dra ihop denna flik</a>
</div>
</div>
<hr />
<div class="entry">
<a name="#2"></a>
<span id="varP2"><a href="javascript:void(0);" onclick="showMore(2,'#2');return false;">Expandera denna flik</a></span>
<div id="varXYZ2" style="display: none">
<p>Lägg innehåll här</p>
<a href="javascript:void(0)" onclick="showMore(2,0);return true;">Dra ihop denna flik</a>
</div>
</div>
</body>
</html>

Så ser en nedbantad version av koden ut. Problemet är att jag på min sida kommer att ha ett begränsat lodrätt utrymme, varpå jag bara kommer att få plats med en expanderad flik åt gången. Och som det är nu, så om man glömmer/struntar i att dra ihop flikarna efter sig, så kommer det att bli en lång radda med flikar, och det blir itne snyggt. Så det jag undrar över är hur man kan modifiera denna kod så att den samtidigt som man fäller ut en flik, fäller ihop alla andra flikar. Jag funderade ett slag på att lägga id't för alla flikar i en array i en funktion. Denna funktionen skulle ta emot den anropande länkens id (den som skall fällas ut, eller om man ser det bakvänt, den som inte skall fällas in) och sedan köra en slinga i vilken man jämför om funktionens argument var lika med värdet i arrayen, om det var skulle den strunta i den, och fortsätta vidare, och fälla ihop alla andra.
Det tråkiga med den metoden är ju att det inte är värst dynamiskt, lägger jag till en till flik, så måste jag lägga till en ny rad i arrayen.
Dessutom fick jag inte den koden att fungera, för jag är kass på javascript. Och så är klockan 3 på mogonen... det kan spela in också :e
Men är det någon som vet om det ens går att säga till ett javascript att ta rätt på alla id'n utom den aktuella, och börja ändra o mderas värden, eller är min array idé enda sättet?

Hoppas någon kan hjälpa mig.

MVH Patrik

Peter SMedlem sedan dec. 20025 483 inlägg

13 sep. 2003 07:55#2

Hejsan!

Här kommer ett exempel på hur du kan göra:

<style type="text/css">
	#item1, #item2, #item3{
		display: none;
	}
</style>

<script type="text/javascript">
<!--

function showMore(_id) {
	var
		crnt = document.getElementById(_id),
		prnt = crnt.parentNode,
		clds = prnt.childNodes,
		len = clds.length;

	crnt.style.display = (crnt.style.display == "" || crnt.style.display == "none") ? "block" : "none";
	while (len-->0) {
		if (clds[len].nodeName == "DIV"
			&& clds[len].id.indexOf(_id.substring(0, --_id.length)) > -1
			&& clds[len].id != _id) clds[len].style.display = "none";
	}
}

//-->
</script>

<div>
	<a href="java&#115;cript:void(0)" onclick="showMore('item1')">Expandera denna flik</a>
	<div id="item1">
		<p>Innehåll</p>
	</div>
	<hr>
	<a href="java&#115;cript:void(0)" onclick="showMore('item2')">Expandera denna flik</a>
	<div id="item2">
		<p>Innehåll</p>
	</div>
	<hr>
	<a href="java&#115;cript:void(0)" onclick="showMore('item3')">Expandera denna flik</a>
	<div id="item3">
		<p>Innehåll</p>
	</div>
</div>

Patrik81Medlem sedan okt. 2001538 inlägg

13 sep. 2003 09:02#3

Det funkar ju så klockrent! Det är ju bara att ödmjukt tacka för ett snabbt svar och en effektiv lösning.

Tack

MVH Patrik