webForumDet fria alternativet
Logga in / Bli medlem

Expand/collapse som sj.se?

HTML & CSS

5 svar · 993 visningar · startad av :stefan:

Medlem sedan apr. 200015 687 inlägg
Trådstart#1

Jag har en liten idé för min stackars fula sida, men jag vet inte om det öht går att genomföra på ett någorlunda vettigt/enkelt sätt.

När man bokar tåg på sj.se och får förslag på avgångar kan man klicka på en rad, raderna nedanför åker ner en bit och i mellanrummet dyker detaljerna om avgångarna upp. Klicka på raden igen och allt återställs.

Hur är det löst?
Går det att göra inom detta forumets begränsningar, är det javascript/dhtml som gäller eller är det nån serverside-teknik som man inte har på ett vanligt bonnwebhotell? ;)

Medlem sedan feb. 200112 078 inlägg
#2

Du kan med javascript ganska enkelt lösa det ungefär såhär:

<script>
function toggle()
{
var el = document.getElementById("mindiv")
el.style.display = el.style.display == "none" ? "" : "none";
}
</script>

[..]

<a href="#" onClick="toggle();">Visa/dölj</a>
<div id="mindiv" style="display:none;">grejer som inte syns från början</div>
Medlem sedan apr. 200015 687 inlägg
#3

Ha, så enkelt... :)

Tack!

Medlem sedan apr. 2003110 inlägg
#4

Hej,
Hittade tråden efter lite sökning på forumet och tyckte det var onödigt att starta en ny tråd.

undrar ifall man kan ändra scriptet så att man kan byta den synliga divven?
Det jag menar är att jag tex ska ha 3 divvar på samma ställe.

Div 1 ska synas från början
När man klickar på Sida 2 eller Sida 3 så ska div 1 släckas och div 2 eler 3 tändas.

Någon som har nån idé?

Mvh daniel
Div 3

Medlem sedan jan. 2001229 inlägg
#5

Skulle detta funka? :)

<script language="JavaScript" type="text/JavaScript">
function expand(nr)
{
	var el = document.getElementById("mindiv"+nr)
	el.style.display = "";
}
function deflate(nr)
{
	var el = document.getElementById("mindiv"+nr)
	el.style.display = "none";
}
</script>
</head>
<body>
<div id="mindiv1">
	<a href="#" onClick="expand(2);deflate(1);">2</a>
	<a href="#" onClick="expand(3);deflate(1);">3</a>
	Denna syns från början</div>
<div id="mindiv2" style="display:none;">
	<a href="#" onClick="expand(1);deflate(2);">1</a>
	<a href="#" onClick="expand(3);deflate(2);">3</a>
	Denna syns om man klickar på 2</div>
<div id="mindiv3" style="display:none;">
	<a href="#" onClick="expand(1);deflate(3);">1</a>
	<a href="#" onClick="expand(2);deflate(3);">2</a>
	Denna syns efter klick på 3</div>	
</body>
Medlem sedan apr. 2003110 inlägg
#6

Tackar :)

262 ms totalt · 4 externa anrop · v20260731065814-full.c32e866c
124 ms — deklarationer (db)
0 ms — hämta statistik (cache)
133 ms — hämta tråd, inlägg och bilagor (db)
126 ms — ändringar (db)