Bouton Afficher/cacher

Bonjour,

J'ai créer des bouton qui font apparaitre le texte a l'aide d'une fonction javascript malheureusement a l'affichage soit j'ai un espace vide qui se complète par le contenu qui s'affiche/se masque soit le contenu passe au dessu de la div suivante, ma question est donc comment je peut faire pour que le contenu pousse automatiquement la div suivante ?

le code source

<div id="ss_exo1">
<h4>Exercice 1 :</h4>
Elaborer un MCA qui permet de calculer le périmètre et la surface d'un champ rectangulaire.<br /><br />

Correction :

<div class="1">
<div id="afficher_cacher1">
<input onclick="apparaitre1();" value="Afficher" type="button"/>
</div>

<div id="solution1" style="visibility:hidden">
<a href="images/mca_1.png" target="blank"><img src="images/mca_1.png" alt="cliquer sur l'image pour agrandir" title="cliquer sur l'image pour agrandir" /></a>
</div>
</div>

<div class="2">
<h4> Exercice 2 : </h4>
Elaborer un MCA qui permet de calculer le salaire mensuel d'un employé qui travail un nombre d'heur par jour et un nombre de jour par moi et une indemnité horaire. De plus il perçoit un pourcentage sur le bénéfice mensuel de l'entreprise. <br /><br />

Correction :
<div id="afficher_cacher2">
<input onclick="apparaitre2();" value="Afficher" type="button"/>
</div>

<div id="solution2" style="visibility:hidden">
<a href="images/mca_2.png" target="blank"><img src="images/mca_2.png" alt="cliquer sur l'image pour agrandir" title="cliquer sur l'image pour agrandir" /></a>
</div>
</div>

le code css

#chapitre_1_cours #application #ss_exo1 .1, .2, .3, .4, .5, .6, .7, .8, .9, .10, .11, .12,
{
position:absolute;

}

#chapitre_1_cours #application #ss_exo1 #solution1, #solution2, #solution3, #solution4, #solution5, #solution6, #solution7, #solution8, #solution9, #solution10, #solution11
{
position: absolute;
}

merci de vos réponses