Systeme panier ouvert fermé

Bonjour a tous,

Je me trouve confronté à un soucis dans le cadre d'une intégration e-commerce.

J'ai un bloc panier comprenant 2 états.

1) état fermer (de base) ou est indiquer le nombre d'articles dans le panier ainsi que la somme totale.
voir ci-dessous:
http://img224.imageshack.us/img224/9...tat1eu8.th.jpg

2) état ouvert ou se trouve un récapitulatif des produits au panier.
voir ci-dessous:
http://img88.imageshack.us/img88/765...tat2fk6.th.jpg

Au clic sur le bouton ouvert le panier passe de l'état 1 à l'état 2 (système ouvert fermer) si on reclic dessus il se referme.

Pour le moment j'ai créer deux div différentes correspondantes au deux états du panier. mon problème est que je n'arrive pas a faire le changement d'état au clic.

De plus je ne sais pas du tout faire en sorte que lorsque l'onclic sur ouvert le mot ouvert devienne fermer et l'inverse si on reclic dessus.

J'attends vos réponses avec impatience.

Voici le code html actuel de mon panier:

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
 
				<div class="bloc_dynamique">
					<img src="images/corps/homepage/panier/top.jpg" alt="haut panier" class="img_bloc" /> 
					<div class="content_bloc_dynamique">
						<div class="head_bloc_dynamique">
							<div id="titre_panier"><img src="images/corps/homepage/panier/titre_panier.jpg" alt="titre panier" /></div>
							<div id="ouvert_fermer"><a href="#1" class="lien_fermer_panier" >Fermer</a></div>
						</div>
 
						<div id="panier_fermer_ouvert" style="display:none" >
							<div id="total_panier"><span class="texte_panier_total">3 Articles  :</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <span class="texte_panier_prix_total">86,80 &euro;</span></div>
						</div>
 
					<div id="panier_ouvert_fermer" style="display:block" >
						<table class="produit_panier">
							<tr>
								<td><a href="#"><img src="images/corps/homepage/panier/icone_plus.jpg" alt="icone +" class="img_bloc" /></a><a href="#"><img src="images/corps/homepage/panier/icone_moin.jpg" alt="icone -" class="img_bloc" /></a></td>
								<td><input type="text" class="input_panier" /></td>
								<td class="texte_panier">Autocuiseur<br />
							    6 litres....</td>
								<td class="texte_prix_panier">999,99 &euro; </td>
							</tr>
						</table>
 
						<table class="produit_panier">
							<tr>
								<td><a href="#"><img src="images/corps/homepage/panier/icone_plus.jpg" alt="icone +" class="img_bloc" /></a><a href="#"><img src="images/corps/homepage/panier/icone_moin.jpg" alt="icone -" class="img_bloc" /></a></td>
								<td><input type="text" class="input_panier" /></td>
								<td class="texte_panier" >Batteries de cuisine<br />
							    5 &eacute;l&eacute;ments....</td>
								<td class="texte_prix_panier">999,99 &euro;</td>
							</tr>
						</table>
						<div id="total_panier"><span class="texte_panier_total">soit un total de :</span>&nbsp;&nbsp;&nbsp; <span class="texte_panier_prix_total">86,80 &euro;</span></div>
							<div id="regler_achat"><a href="#"><img src="images/corps/homepage/panier/regler_achat.jpg" alt="regler les achats" /></a></div>
					</div>
				</div>
					<img src="images/corps/homepage/panier/bottom.jpg" alt="bas panier" class="img_bloc" />
 
				</div>

et mon morceau de javascript:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
 
//texte afficher masquer
 
function visibilite(thingId){
  var targetElement;
  targetElement = document.getElementById(thingId) ;
  if (targetElement.style.display == "none")
  {
  targetElement.style.display = "" ;
  } else {
  targetElement.style.display = "none" ;
}
}

Je vous remercie par avance

Je viens de régler mon problème grâce à jquery.

Pour ceux que ça intéresse.

J'ai crée deux paniers (1 ouvert et un fermer).

Avec deux id différents et j'ai fais cette fonction:
Code:

1 2 3 4 onclick="$('#panier_ouvert_fermer' ).show(); $('#panier_fermer_ouvert' ).hide();">Ouvrir</a>
et l'inverse pour l'autre etat

sinon:
Code:

1 2 3 4 function visibilite(thingId){ var targetElement = document.getElementById(thingId) ; targetElement.style.display =(targetElement.style.display == "none")?"block":"none" }
en ayant pris soin de définir le style pas défaut dans la balise ...