How to hide an html element without losing its space on the screen?

Question

How to hide an html element without losing its space on the screen?

Navigation

#1 by (6 votes)
#2 by (-1 votes)

4

What I want to achieve is to keep some labels hidden either through its clase or its ID , what I'm trying to achieve is a accordion dynamically in horizontal format.

If I click on any accordion this should hide all the tabs except the one that was selected, this is already done on average, because when the objetos not selected are hidden the accorcdion change size .

This is how it looks when HTML elements are hidden

and when I enter the system, it looks like that and should be seen in that same size.

Code to hide elements:

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


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

Code to show the elements of the selected Accordion

    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);

}

It already hides the elements to me only that when it does the accordion changes size and the new elements that should be seen are not seen correctly.

javascript jquery

asked by David 26.01.2017 в 21:02

source

2 answers

-1

You can create a function in your JavaScript to hide the elements of your html

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

and to show you should only:

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

You can Play a little with your Div in case you want to hide a region:

   <div class="row" id="datos" name="datos" style="display:block;">
   //tu Html
  </div>

answered by 26.01.2017 в 21:31

Javascript promises, ajax requests () Run function according to the status of a checkbox

score 6 · Accepted Answer

Uses the property visibility of css, instead of the methods hide() and show() .

The visibility property is used to determine if the boxes that an element generates are rendered.

as an example:

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

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

link