4

Lo que quiero lograr es mantener oculto algunos labels ya sea a travez de su clase o de su ID, lo que estoy tratando de conseguir es un accordion de manera dinamica en formato horizontal.

Si yo le doy clic en cualquier accordion este deberia de ocultarme todas las pestañas excepto la que se selecciono, esto ya lo realiza a media, porque cuando los objetos no seleccionados se ocultan el accorcdion cambia de tamaño.

Asi se ve cuando se ocultan los elementos de HTML

introducir la descripción de la imagen aquí

y cuando ingreso al sistema asi se ve y asi deberia verse en ese mismo tamaño.

introducir la descripción de la imagen aquí

Codigo para ocultar elementos:

    function ocultarInfo() {
        $('#textName1').hide();
        $('#textCertificate1').hide();
        $('#textRFC1').hide();
        $('#textType1').hide();
        $('#textCountry1').hide();
        $('#textState1').hide();
        $('#textAdress1').hide();
        $('#textCode1').hide();
        $('#textPhone1').hide();


        $('.textLBL1').hide();
    }

Codigo para mostrar los elementos del Accordion seleccionado

    function verInfo(conta) {

            if (conta == 2) {
    $('#txtNombre' + conta).show();
    $('#txtCertificado' + conta).show();
    $('#txtRFC' + conta).show();
    $('#txtSistema' + conta).show();
    $('#txtPais' + conta).show();
    $('#txtEstado' + conta).show();
    $('#txtTelefono' + conta).show();
    $('#txtDireccion' + conta).show();
    $('#txtCodigo' + conta).show();

    setTimeout(ocultarInfo, 2000);

}

Ya me oculta los elementos solo que cuando lo hace el accordion cambia de tamaño y los nuevos elementos que deberian de verse no se ven correctamente.

2 respuestas 2

7

Utiliza la propiedad visibility de css, en vez de los metodos hide() y show().

La propiedad visibility se utiliza para determinar si las cajas que genera un elemento son renderizadas.

como ejemplo:

function ocultarInfo() {
    $("#textName1").css('visibility', 'hidden');
    // -------
}

function verInfo(conta) {
    // --------
    $('#txtNombre' + conta).css('visibility', 'visible');
    // -------
}

http://www.w3.org/wiki/CSS/Properties/visibility

-1

Puedes crear una funcion en tu JavaScript para que te oculte los elementos de tu html

 function ocultarInfo(){
   $("#txtNombre").css("display", "none");
   $("#txtCertificado").css("display", "none");
   $("#txtRFC").css("display", "none");
 }

y para Mostrar Solo debes:

function MostrarInfo(){
   $("#txtNombre").css("display", "block");
   $("#txtCertificado").css("display", "block");
   $("#txtRFC").css("display", "block");
 }

Puedes Jugar un poco con tus Div en caso de querer ocultar una region:

   <div class="row" id="datos" name="datos" style="display:block;">
   //tu Html
  </div>
1
  • utilizar display:block también reduciría el tamaño del contenedor, seria bueno solo si el div tiene un alto fijo, y vendrían problemas de diseño si en este div se agregan elementos dinámicos.
    – JuankGlezz
    Commented el 26 ene. 2017 a las 21:44

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.