Ocultar y mostrar descripcion

[raul999]

Hola, buenas tardes.

Bueno, lo que quiero hacer que cuando de click al botón se muestre la tabla y cambie el nombre del botón por ocultar descripción, hasta ahí bien, el problema reside en que cuando quiero ocultar la descripcion y cambiar el nombre a mostrar descripcion al darle al botón no ocurre nada.

Alguien podría decirme como hacerlo?, llevo horas intentandolo y no sé donde esta el fallo.

Gracias y un saludo.

Código HTML:

<div class="boton" align="center">
    <input type="button" value="Mostrar Descripción" id="mostrarYOcultarDescripcion" onClick="javascript:mostrar_ocultar(this.form)">
</div>
                <div id="tablaDescripcion">
                <table id="tablaTienda" class="tablaTienda" border="1" width="30%" cellspacing="0px" cellpadding="30px" align="center">
                    <tr>
                        <td align="center"><p align="left">NOX Cyclops. Peso y dimensiones: 173 mm, 400 mm, 405 mm. Color: Negro. Material: Metal. Cooling: 1x 80 mm</p></a></td>
                    </tr>
                </table>
                </div>
 

Código CSS:

#tablaDescripcion{
    visibility: hidden;
}
 

Código Javascript:

function mostrar_ocultar(form) {
    if($('#tablaDescripcion').css('visibility', 'hidden' )){
        $('#tablaDescripcion').css('visibility', 'visible' );
        $('#mostrarYOcultarDescripcion', window.parent.document).val('Ocultar Descripción');  
    }else{
        $('#tablaDescripcion').css('visibility', 'hidden' );
        $('#mostrarYOcultarDescripcion', window.parent.document).val('Mostrar Descripción');
    }
}