Problema Jquery

reperior

Problema Jquery

Raga, ho ancora problemi con jquery.. non capisco dove sbaglio! Per fare una prova ho composto questo codice:
[HTML]<!DOCTYPE HTML>
<html><head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<script type="text/javascript" src="code.jquery.com/jquery-latest.js"></script>
<meta name="author" content="Reperior" >
<meta name="description" content="Il miglior fansite del secolo!" >
<meta name="keywords" content="Habbo, Fansite, Habbo Fansite, Habbino, Radio, Musica, teenagers" >
<link href="main.css" rel="stylesheet" type="text/css" >
<title>Man on the roll</title>
<meta name="Reperior" content="Habbo Fansite" >
<meta name="copyright" content="Copyright " >
</head>
<body>
<div id="container" style="position:relative; left:-12px; top:-16px; height:891px; " >
<div id="logo"></div>
<div style="position:absolute; width:990px; height:128px; left:36px; top:273px; " class="header" >
<img src="images/groupboard_Sticky.gif" alt="" style="position:relative; left:371px; top:7px; " >
<img src="images/pwrup_powerdrill.gif" alt="" style="position:relative; left:514px; top:8px; " >
<img src="images/v22_1.gif" alt="" style="position:relative; left:177px; top:6px; " >
<img src="images/icon_ecard.gif" alt="" style="position:relative; left:623px; top:6px; " >
<div style="position:absolute; width:385px; height:448px; left:44px; top:84px; " class="article" >

		<div id="art1" style="position:absolute; height:420px; width:356px; left:9px; top:8px; " class="article_body"></div>
	
		<div style="position:absolute; width:311px; height:453px; left:615px; top:-7px; " class="article" id="art2">
	
			<div style="position:absolute; height:37px; width:253px; left:-558px; top:42px; " class="green_button" >
				<h1 style="position:relative; left:72px; top:-25px;" >Titolo</h1>
			</div>
			<div style="position:absolute; width:293px; height:424px; left:10px; top:20px; " class="article_body" ></div>
		</div>
	</div>

<p class="parag" style="position:relative; width:345px; height:313px; left:64px; top:122px; " >Questa news è solo di prova...</p>
<div style="position:absolute; height:35px; width:222px; left:701px; top:129px; " class="red_button" ></div>

</div>
<div style="position:absolute; width:224px; height:45px; left:740px; top:579px; " class="yellow_button" >
<p style="position:relative; height:89px; left:47px; top:-158px; " class="parag" >
Provaaaa
<p style="position:relative; height:89px; left:51px; top:-81px; " class="parag" > Provaaaa
</p>
</p>
</div>
<script type="text/javascript">
$(document).ready(function() {
$("#article").hide("slow");
});
</script>
</body>
</html>[/HTML].

Se volete vedere il sito:
(dovete mettere h t t p : / / per farlo andare)

habbinoradio
altervista
org

Jquery non funge... perché?
[HTML][/HTML]

P.S: dovete mettere i punti tra una parola e l'altra...

linoma

Usi un selettore che ha cm parametro un id, pare nn ci sia nessun elemento html che abbia un id article, ce ne sn 2 o3 che hanno classe article. E' buona prassi inserire lo javascript, in particolare il document.ready, nell header.

reperior

E come aggiungo il javascript documen.ready nell'header?

reperior

E ora?
[html]
<!DOCTYPE HTML>
<html><head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<script type="text/javascript" src="code.jquery.com/jquery-latest.js"></script>
<meta name="author" content="Reperior" >
<meta name="description" content="Il miglior fansite del secolo!" >
<meta name="keywords" content="Habbo, Fansite, Habbo Fansite, Habbino, Radio, Musica, teenagers" >
<link href="main.css" rel="stylesheet" type="text/css" >
<title>Man on the roll</title>
<meta name="Reperior" content="Habbo Fansite" >
<meta name="copyright" content="Copyright " >
</head>
<body>
<div id="container" style="position:relative; left:-12px; top:-16px; height:891px; " >
<div id="logo" class="nav"></div>
<div style="position:absolute; width:990px; height:128px; left:36px; top:273px; " class="header" >
<img src="images/groupboard_Sticky.gif" alt="" style="position:relative; left:371px; top:7px; " class="nav">
<img src="images/pwrup_powerdrill.gif" alt="" style="position:relative; left:514px; top:8px; " class="nav">
<img src="images/v22_1.gif" alt="" style="position:relative; left:177px; top:6px; " class="nav">
<img src="images/icon_ecard.gif" alt="" style="position:relative; left:623px; top:6px; " class="nav">
<div style="position:absolute; width:385px; height:448px; left:44px; top:84px; " class="article all" >

		<div id="art1" style="position:absolute; height:420px; width:356px; left:9px; top:8px; " class="article_body all"></div>
	
		<div style="position:absolute; width:311px; height:453px; left:615px; top:-7px; " class="article all" id="art2">
	
			<div style="position:absolute; height:37px; width:253px; left:-558px; top:42px; " class="green_button all" >
				<h1 style="position:relative; left:72px; top:-25px;" class="all">Titolo</h1>
			</div>
			<div style="position:absolute; width:293px; height:424px; left:10px; top:20px; " class="article_body all" ></div>
		</div>
	</div>

<p class="parag all" style="position:relative; width:345px; height:313px; left:64px; top:122px; " >Questa news è solo di prova...</p>
<div style="position:absolute; height:35px; width:222px; left:701px; top:129px; " class="red_button all" ></div>

</div>
<div style="position:absolute; width:224px; height:45px; left:740px; top:579px; " class="yellow_button all">
<p style="position:relative; height:89px; left:47px; top:-158px; " class="parag all" >
Provaaaa
<p style="position:relative; height:89px; left:51px; top:-81px; " class="parag all" > Provaaaa
</p>
</p>
</div>
<script type="text/javascript">
$(document).ready(function() {
$(".nav").hide("slow")
});
</script>
</body>
</html>
[/html]

Dov'è che sbaglio? Perché non mi nasconde niente?

linoma

Le immagini sn nascoste.

reperior

OK... allora questo:
[html]
<!DOCTYPE HTML>
<html><head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<script type="text/javascript" src="code.jquery.com/jquery-latest.js"></script>
<meta name="author" content="Reperior" >
<meta name="description" content="Il miglior fansite del secolo!" >
<meta name="keywords" content="Habbo, Fansite, Habbo Fansite, Habbino, Radio, Musica, teenagers" >
<link href="main.css" rel="stylesheet" type="text/css" >
<title>Man on the roll</title>
<meta name="Reperior" content="Habbo Fansite" >
<meta name="copyright" content="Copyright " >
</head>
<body>
<div id="container" style="position:relative; left:-12px; top:-16px; height:891px; " >
<div id="logo" class="nav"></div>
<div style="position:absolute; width:990px; height:128px; left:36px; top:273px; " class="header" >
<img src="images/groupboard_Sticky.gif" alt="" style="position:relative; left:371px; top:7px; " class="nav">
<img src="images/pwrup_powerdrill.gif" alt="" style="position:relative; left:514px; top:8px; " class="nav">
<img src="images/v22_1.gif" alt="" style="position:relative; left:177px; top:6px; " class="nav">
<img src="images/icon_ecard.gif" alt="" style="position:relative; left:623px; top:6px; " class="nav">
<div style="position:absolute; width:385px; height:448px; left:44px; top:84px; " class="article all" >

		<div id="art1" style="position:absolute; height:420px; width:356px; left:9px; top:8px; " class="article_body all"></div>
	
		<div id="art2" style="position:absolute; width:311px; height:453px; left:615px; top:-7px; " class="article all">
	
			<div style="position:absolute; height:37px; width:253px; left:-558px; top:42px; " class="green_button all" >
				<h1 style="position:relative; left:72px; top:-25px;" class="all">Titolo</h1>
			</div>
			<div style="position:absolute; width:293px; height:424px; left:10px; top:20px; " class="article_body all" ></div>
		</div>
	</div>

<p class="parag all" style="position:relative; width:345px; height:313px; left:64px; top:122px; " >Questa news è solo di prova...</p>
<div style="position:absolute; height:35px; width:222px; left:701px; top:129px; " class="red_button all" ></div>

</div>

<div style="position:absolute; width:224px; height:45px; left:740px; top:579px; " class="yellow_button all">
<p style="position:relative; height:89px; left:47px; top:-158px; " class="parag all" >
Provaaaa
<p style="position:relative; height:89px; left:51px; top:-81px; " class="parag all" > Provaaaa
</p>
</p>
</div>
<script type="text/javascript">
$(document).ready(function()
{
$('.header').click(function()
{
$('.all').toggle();
});
});
</script>
</body>
</html>
[/html]

Qua dopo che ho cliccato una volta, per riottenere lo .show() devo ricliccare, io riclicco ma mi ricompaiono solo alcune immagini.... perchè? Il sito è sempre quello di prima!