Ocultar botão ao clicar no mesmo

[wertycs 0]

Opa, gostaria de uma ajuda,... já pesquisei horrores e nada. Seguinte:

O que preciso é ocultar um botão ao clicar no mesmo, ou seja, clicou, sumiu, rsrrs. Porém esse botão já é responsável por mostrar o conteúdo de uma DIV.

Essa é a função que oculta a DIV.

<script type="text/javascript">
function abrir() {
    var main = document.getElementById("principal");
    var iten = main.getElementsByTagName("input");
    if (iten) {
        for (var i=0;i<iten.length;i++) {
            iten[i].onclick = function() {
                var el = document.getElementById(this.id.substr(7,7));
                if (el.style.display == "block")
                    el.style.display = "none";
                else
                    el.style.display = "block";
            }
        }
    }
}
window.onload=abrir;
</script>

A Div:

<div id="1" style="display:none;">
  Conteudo
</div>

Esse é o botão que Mostra o conteúdo e até aí funciona certinho,... porém esse onClick não está ocultando o botão, pelo menos não consegui fazê-lo ocultar.

<div id="principal">
    <input type="button" onClick="document.getElementsById('teste121').style.display='none';" type="button" value="Mostrar" id="teste121">
</div>

Como poderia fazer para o código executar o "Mostrar" e ao mesmo tempo sumir com o botão?

[wertycs 0]

Opa,

Consegui resolver com JQuery.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

<script type="text/javascript">
$(function(){		
$("#bloco1").click(function(){
	$("#id-show").show("slow");
	$("#bloco1").hide("fast");});
});
</script>

<input id="bloco1" type="button" value="Próximo" />

<div id="id-show" style="display: none;">
  <h1>Conteúdo</h1>
</div>