Agrandir un "div à scroller" au click de la souris

Salut !

Comme indiqué dans le titre je voudrais agrandir une forme en cliquant avec la souris, voila des screen qui pourront vous éclairer:
Donc voila au départ j'ai ca
http://gyazo.com/e2be4b7a53a51dbaef5dce9daf76efbc (différentes areas)

Et en cliquant sur Americas, ca fait ca:
http://gyazo.com/2f179157dd6dcf9eee1f6f25fa6fed24

En fait ca descend les autres textes et donc du coup ca dépasse donc ce que je voudrais c'est que quand je clique sur Americas (ou sur les autres areas) ca fait quelque chose comme ca:

height = height + 50px;

Mais bon je sais pas comment faire exactement ......


Si ca peut vous aider, voila le css et HTML lier a ce scroll

#DIV_MOVE {
/*  position : absolute; /* IMPERATIF */
  left : 1100px;
  top : 120px;
  color : #000000;
  font-size : 13px;
  font-family : Verdana;
  text-align : center;
  background-color : #b0c4de;
  height : 320px; // A MODIFIER
  width  : 130px;
  border-style : solid;
  border-width : 1px;
  border-color :  #ffffff #808080 #808080 #ffffff;
  z-index : 1000;
}

#DIV_MOVE_SOUS_MENU{
/*  position : absolute; /* IMPERATIF */
  color : #0B064D;
  font-size : 11px;
  font-family : Verdana;
  text-align : center;

<div id="DIV_MOVE">
		<div id="D_MOVE_TITRE"> Selection </div>
		<a href="#" id="monid" data="Learner_Area||americas" onclick="javascript:visibilite('div_americas'); return false;">AMERICAS</a><br/>
			<div id="div_americas" style="display:none;">
				<div id="DIV_MOVE_SOUS_MENU">
					<a href="#" id="monid" data="Learner_Country||argentina">Argentina</a><br/>
					<a href="#" id="monid" data="Learner_Country||brazil">Brazil</a><br/>
					<a href="#" id="monid" data="Learner_Country||chile">Chile</a><br/>
					<a href="#" id="monid" data="Learner_Country||colombia">Colombia</a><br/>
					<a href="#" id="monid" data="Learner_Country||el salvador">El Salvador</a><br/>
					<a href="#" id="monid" data="Learner_Country||guatemala">Guatemala</a><br/>
					<a href="#" id="monid" data="Learner_Country||mexico">Mexico</a><br/>
					<a href="#" id="monid" data="Learner_Country||peru">Peru</a><br/>
					<a href="#" id="monid" data="Learner_Country||united states">United States</a><br/><br/>
				</div>		
			</div>	
.
.

J'espère que vous pourrez donc m'aider =)


- geo

Salut,

Sémantiquement parlant tu devrais plutôt utiliser une liste de lien plutôt que seulement des liens agrémenté de br.

Sinon pour ton problème, il faut que tu enlèves la height sur ton conteneur et le comportement que tu souhaites se fera tout seul. De plus il faut enlever le positionnement absolute qui n'est pas impératif et qui crée le problème que tu as ^^

Ha cool j ai enlevé le height et c bon ^^

Par contre pour la position non c impératif absolute sinon ca marche plus (en fait si je descend bah la séelection va suivre et sera toujours visible c'est pas fixe ....)

Sinon pas compris pour liste ....... >>>> newbie en programmation web ? oui oui c'est moi ^^

Iop

Je parlais d'utiliser un truc du genre :

<ul>
<li>
<a href="#">...</a>
</li>
<li>
<a href="#">...</a>
</li>
</ul>

Plutôt qu'une succession de <a> séparé par des <br/>, car ici il s'agit bien d'une liste de lien ^^

Bonne continuation