.show() aparece y desaparece rapidamente su contenido

Espero me puedan ayudar con este problema que tengo, lo que tengo que realizar es que cuando no se da la respuesta correcta tiene que aparecer una leyenda del porque no es esa la respuesta correcta, previamente ya habia ocultado las ayudas desde css para poderlas mostrar desde un .show(), pero al momento de validar una respuesta esta ayuda, aparece y desaparece rapidamente, no se mantiene la ayuda, si le pongo milisegundos no realiza la funcion y no aparece nada. ayuda porfavor, no lo voy a mandar por php, de momento nadamas es asi.

Código HTML :

<div>
    <p>¿África, América, Antártida, Asia, Europa, y Oceanía son?</p>
    <form action="">
        <input type="radio" name="pregunta1" value="1" id="respuesta1">
        <label for="respuesta1">Países</label><br>
            <p class="ayudas" id="ayuda1">Territorio, con características geográficas y culturales propias, que puede constituir una entidad política dentro de un Estado.</p>

        <input type="radio" name="pregunta1" value="2" id="respuesta2">
        <label for="respuesta2">Municipios</label><br>
            <p class="ayudas" id="ayuda2">División territorial administrativa en que se organiza un estado, que está regida por un ayuntamiento.</p>

        <input type="radio" name="pregunta1" value="3" id="respuesta3">
        <label for="respuesta3">Estados / provincias</label><br>
            <p class="ayudas" id="ayuda3">Es una organización política forzosa e involuntaria constituida por instituciones burocráticas y administrativas estables, como la policía, los militares etc. a través de las cuales ejerce el monopolio del uso legal de la fuerza física (soberanía) aplicada a una población dentro de unos límites territoriales establecidos.</p>

        <input type="radio" name="pregunta1" value="4" id="respuesta4">
        <label for="respuesta4">Continentes</label><br>
            <p class="ayudas" id="ayuda4">Es cada una de las grandes extensiones en que se divide la superficie terrestre, separadas entre sí por los océanos.</p>

        <input type="radio" name="pregunta1" value="5" id="respuesta5">
        <label for="respuesta5">Islas</label><br>
            <p class="ayudas" id="ayuda5">Es una zona de masa terrestre estable, más o menos extensa, rodeada completamente por una masa de agua.</p>

        <button id="button">Validar</button>
    </form>
</div>

Código CSS :

#ayuda1, #ayuda2, #ayuda3, #ayuda4, #ayuda5{
    text-align: right;
    display: none;
}

Código Javascript :

$(document).ready(function()
      {
      $("#button").click(function () {    
         var valor_val = ($('input:radio[name=pregunta1]:checked').val());
         if (valor_val == 1){
            $("#ayuda1").show();
         }else if (valor_val == 2) {
            $("#ayuda2").show();
         }else if (valor_val == 3){
            $("#ayuda3").show();
         }else if (valor_val == 4){
            $("#ayuda4").show();
         }else if (valor_val == 5){
            $("#ayuda5").show();
         }else{
            alert("selecciona una opción");
         }
         });

       });

No hay nada en tu codigo que le vuelva a dar el display none, aunque entiendo que si clickea otra respuesta y habia una ayuda anterior desplegada se tiene que ocultar,
Que dice la definicion del estilo ayudas? No tendras en algun lado un hide() ?

Jorge

solisarg escribió:

Anteriormente haciendo pruebas pense que ese era el problema cuando con la clase "ayudas" desde css lo ocultaba desde display: none; (lo mismo que esta en css pero en vez de que sea ayuda1,ayuda2.... lo quise hacer desde "ayudas")

Asegurate que no hay otro estilo que lo oculte en ningun lado

Jorge

solisarg escribió:

Es todo lo que hay, ya no hay mas.

el problema era con la etiqueta button, debia estar afuera de las etiquetas form, si se desea poner una input, tiene que se de la siguiente manera
<form>
...
...
...
<input type="button" name="pregunta1" id="button" value="Validar">
</form>