Ciao a tutti! Volevo chiedere se mi potreste aiutare per creare un div a comparsa (è una giornata che faccio ricerche ma non riesco a trovare qualcosa di simile!).

Questa è la pagina in questione:
Sito

Vorrei riuscire a fare in modo che la parte rosa non compaia finchè non si clicca sulla parte viola (e viceversa), facendo così scorrere automaticamente tutto quello che c'è sotto.

Questo è il codice, se era possibile evitare il javascript meglio

Questo è l'XHtml
codice:
<body>
      <div class="f25"> 
        <div class="top" style="background:#7f005c;"> 
          <div class="p5">Menu2</div>
        </div>
        <div class="elencone"> 
          <div class="spazio"></div>
          <div class="elenchino"> 
            Lorem ipsum dolor sit amet etc etc etc :-P Lorem ipsum dolor sit amet etc etc etc :-PLorem ipsum dolor sit amet etc etc etc :-PLorem ipsum dolor sit amet etc etc etc :-P
          </div>
          <div class="clear"></div>
        </div>
        <div class="spazio"></div>
        <div class="top" style="background:#7f005c;"> 
          <div class="p5">Menu 1</div>
        </div>
        <div class="elencone"> 
          <div class="spazio"></div>
          <div class="elenchino"> 
            Lorem ipsum dolor sit amet etc etc etc :-P Lorem ipsum dolor sit amet etc etc etc :-PLorem ipsum dolor sit amet etc etc etc :-PLorem ipsum dolor sit amet etc etc etc :-P
          </div>
          <div class="clear"></div>
        </div>
      </div>
</body>
Questo invece il Css
codice:
* {margin:0; padding:0;}

body {text-align:center;
	padding:5px 0 0 0;
	font: 0.8em/1.25 Geneva, Arial, Helvetica, sans-serif;
	color:#606;
	background:#FFF;}

div.clear {clear:both;}
div.elenchino {margin:0 2%; width:96%; color:#007; text-align:left;}
div.elencone {background:#FFA9FF;}
div.f25 {float:left; width:24.9999%;}
div.p5 {padding:5px 0;}
div.spazio {clear:both; padding:5px 0 0 0;}
div.top {color:#FFF; text-align:center;}