Bouton Menu vers iFrame

Bonjour a tous , j'ai une page JSP sur laquelle j'ai un Menu je voudrais que quand je choisi l'un des boutons par exemple Controle de l journée ca affiche une iFrame que j'ai créé qui appelle une autre page JSP mais le problème c'est que j'ai toujours cette iFrame visible sur ma page même si je ne clique pas sur le bouton du Menu , je voudrais savoir comment la rendre invisible mais en même temps visible quand je clique sur le Bouton du Menu , voici un aperçu sur la page JSP

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
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
 
<html>
<head>
<style>
  body {
background-image: url(images/Accueil.png); 
-moz-background-size: cover;
-webkit-background-size: cover;
background-size: cover;
background-position: top right !important;
background-repeat: no-repeat !important;
background-attachment: fixed;
}
    </style>
    <!-- Load jQuery from Google's CDN -->
    <script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
  <!-- Source our javascript file with the jQUERY code -->
    <script src="script.js"></script>
    <link rel="stylesheet" href="dropdown-menu.css" />
    <title>Bienvenue <%=session.getAttribute("name")%></title>
    <link rel="icon" type="image/png" href="images/favicon-16x16.png" sizes="16x16" />
  </head>
<body>
 
<br />
<br />
<ul id="navigation" class="nav-main"  style="margin-left:-11;" align="center">
 
    <li class="list"><a href="#">Ouvrir</a>
	<ul class="nav-sub">
   				    <li><a href="ControledelaJournee.jsp" target="I1">Contrôle de la Journée</a></li>
  					<li><a href="#">Main Courante</a></li>
  					<li><a href="#">Réglements</a></li>
  					<li><a href="#">Portefeuille Résilié</a></li>
  					<li><a href="#">Etat Portefeuille</a></li>
  					<li><a href="#">Transactions</a></li>
  					<li><a href="#">Interface Comptable</a></li>
	</ul>
	</li>
 
    <li class="list"><a href="#">Actions</a>
	<ul class="nav-sub">
		  		    <li><a href="#">Enregistrer</a></li>
		  		    <li><a href="#">Copier</a></li>
		  		    <li><a href="#">Couper</a></li>
		  		    <li><a href="#">Coller</a></li>
  					<li><a href="#">Imprimer</a></li>
  					<li><a href="index.jsp">Déconnexion></a></li>    
	</ul>
	</li>
 
 
 
 
    <li class="list"><a href="#">Affichage</a>
	<ul class="nav-sub">
   				    <li><a href="#">Zoom</a></li>
   				    <li><a href="#">Mosaique</a></li>
   				    <li><a href="#">Cascade</a></li>
  					<li><a href="#">Plein Ecran</a></li>
	</ul>
	</li>
 
    <li class="list"><a href="#">Aide</a>
	<ul class="nav-sub">
   				    <li><a href="#">Support</a></li>
  					<li><a href="#">Contact</a></li>
 
	</ul>
	</li>
 
</ul>
<br />
<br />
<IFRAME marginWidth=2 marginHeight=0 src="ControledelaJournee.jsp" frameBorder=0 width=1000 scrolling=no height=800 name="I1" id="IFrame1" target="_blank" style=" margin-top: 18px;margin-left: -350;" align="left">
</IFRAME>
</body>
</html>

Merci d'avance