Affichage de div en fondu

Bonjour,

J'ai commencé a bidouiller ce petit bout de page web utilisant JS, CSS & HTML.
Tout marche comme il faut pour l'instant quand je clic sur les boutons show, le texte s'affiche en fondu, disparaît quand je clic sur un autre bouton show et affiche le nouveau texte.

Le problème arrive quand j'essais de remplacer les p1,p2,p3 & b (c'est moche je sais [lol]) par des divs, plus rien ne marche.

-soit les divs s'affichent malgré le display none,
-soit les divs s'affichent et reviennent vers la précédente,
-soit les boutons show ne marchent plus...

Voici le code, c'est un gros brouillon mais c'est celui qui marche le mieux pour moi (chrome) :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
<!DOCTYPE html>
<html>
<head>
  <style>
        p1, p2, p3{font-size:150%; cursor:pointer;}
        b2, b3{display:none; }
        b1, b2, b3{position:absolute; margin:200px 0 0 500px;}
  </style>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
			<p1>Show1</p1> 
			<p2>Show2</p2>
			<p3>Show3</p3>
 
			<br><br><br><br>
 
			<b1>display menu 1</b1>
			<b2>display menu 2</b2>
			<b3>display menu 3</b3>
 
	<script>
                $("p1").click(function () {
                $("b1").fadeIn("slow");
                $("b2").fadeOut("slow");
                $("b3").fadeOut("slow");
                });
                
                $("p2").click(function () {
                $("b1").fadeOut("slow");
                $("b2").fadeIn("slow");
                $("b3").fadeOut("slow");
                });
 
                $("p3").click(function () {
                $("b1").fadeOut("slow");
                $("b2").fadeOut("slow");
                $("b3").fadeIn("slow");
                });
        </script>
 
</body>
</html>