Göm/Visa specifikt id

Att gömma en div kan vara bra att veta, det vet alla.
Men sedan att visa diven när du klickar på en länk, det vet inte alla hur man gör.
Det tänkte jag visa er.

Först skapar du ett nytt HTML dokument.
Sedan skapar du en div. Jag ger min div id div, så der blir enkelt att komma ihåg. Skriv in:

<div id="div" style="display:none;">content</div>

Sedan ska vi skapa två länkar.
En utanför diven som ska visa diven, och en innanför dom döljer den.

Sedan ska vi skapa lite js kod.
Så emellan head sektionen lägger vi till:

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

-->
</script>

Så, gå in i head sektionen igen!
Skriv in:

<script language="javascript" type="text/javascript">
<!--
function showDiv()
{
    document.getElementById('div').style.display='block';
}
function hideDiv()
{
    document.getElementById('div').style.display='none';
}

Den slutgiltiga koden borde vara:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Petters javascript lektion</title>
<script language="javascript" type="text/javascript">
<!--
function showDiv()
{
    document.getElementById('div').style.display='block';
}
function hideDiv()
{
    document.getElementById('div').style.display='none';
}
-->
</script>
</head>

<body>
<a href="#" onclick="javascript:showDiv()">Visa innehåll</a><br />
<div id="div" style="display:none">Tempus fugit - tiden iler

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
1.1. Loreum Ipsum

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
1.1.1. Loreum Ipsum

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
1.1.1.1. Loreum Ipsum

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
1.1.1.1.1. Loreum Ipsum

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
1.1.1.1.1.1. Loreum Ipsum

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
<br /><br />
<a href="#" onclick="javascript:hideDiv()">Göm innehåll</a></div>
</body>
</html>

Detta tips skapades 2008-07-05 10:04:51 av Pettersoft. Det har lästs 436 gånger. ||

Kommentarer

Helroth sa den 5 juli 2008 kl 15:47:

Hur gör man om man vill att "Göm innehåll" är "gömd" när innehållet är "gömd"?

Pettersoft sa den 5 juli 2008 kl 16:36:

du placerar göm innehåll länken innanför div.

voigtan sa den 5 juli 2008 kl 18:38:

Varför inte göra funktionen så dynamisk som möjligt, just nu låster du dig till en och samma element som har ett id som är "div".

Pettersoft sa den 5 juli 2008 kl 20:00:

för jag kan inte det.

voigtan sa den 5 juli 2008 kl 21:50:

Finns ett exempel http://aspkoll.se/GoodiesTipsRead.asp?id=20 på det.