Event that hides two tables with Javascript

Navigation
1

Good afternoon I have a code that works well and what it does is that when I give it in room 1 + room it shows me room 2 and in room 2 when I give it + room it shows me room 3 in each one I can hide but I would like it in room 1 could hide and simultaneously hide room 2 and room 3 because to give at this time to hide in room 1 when room 2 is open and room 3 I have room 3 open and I would like only room to stay 1 bone I return to the state initial. Then the code thanks. 

function desplegar(tabla_a_desplegar, estadoT, estadoTfila) {
  console.log(estadoT)
  var tablA = document.getElementById(tabla_a_desplegar);
  var estadOt = document.getElementById(estadoT);
  var fila = document.getElementById(estadoTfila);

  switch (tablA.style.display) {
    case "none":
      tablA.style.display = "block";
      estadOt.innerHTML = "Ocultar";
      fila.innerHTML = "";
      fila.innerHTML = " La fila de id: " + fila.id + ". Contiene: " + fila.innerHTML + " :: " + fila.style.background;
      break;
    default:
      tablA.style.display = "none";
      estadOt.innerHTML = "+Habitacion"
      break;
  }


}
<table style="margin-left:27px; margin-right:27px">
  <tbody>
    <tr>
      <td>
        <p style="font-family: 'Roadgeek 2005 Series 1B', sans-serif; font-size:16px; color:#000000; text-align:left; margin-top:12px">Habitacion 1</p>
      </td>
      <td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td>
      <td>
        <p style="font-family: 'Roadgeek 2005 Series 1B', sans-serif; font-size:16px; color:#000000; text-align:left; margin-top:12px">Adulto</p>
      </td>
      <td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td>
      <td>
        <p style="font-family: 'Roadgeek 2005 Series 1B', sans-serif; font-size:16px; color:#000000; text-align:left;margin-top:12px">&nbsp;Ni&ntilde;o</p>
      </td>
    </tr>
    <tr>
      <td>
        <p style="font-family: 'Roadgeek 2005 Series 1B', sans-serif; font-size:16px; color:#000000; text-align:left; margin-top:12px">
          <a class="registro registrolinea habitacion" id="estadoT" onClick="desplegar('tabla_a_desplegar','estadoT', 'estadoTfila')" style="background: #AEE756; cursor: pointer;">+ Habitacion</a>
        </p>
      </td>


      <td>&nbsp;&nbsp;&nbsp;&nbsp;</td>
      <td>
        <p style="font-family: 'Roadgeek 2005 Series 1B', sans-serif; font-size:16px; color:#000000; text-align:left; margin-top:12px">
          <select class="form-control seleccionunoir" id="sel1">

            <option>1</option>
            <option>2</option>
            <option>3</option>
            <option>4</option>
            <option>5</option>



          </select>
        </p>
      </td>
      <td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td>
      <td>
        <p style="font-family: 'Roadgeek 2005 Series 1B', sans-serif; font-size:16px; color:#000000; text-align:left;margin-top:12px">
          <select class="form-control selecciondosir" id="sel1">

            <option>0</option>
            <option>1</option>
            <option>2</option>
            <option>3</option>
            <option>4</option>
            <option>5</option>



          </select>
        </p>
      </td>
    </tr>

  </tbody>
</table>
<table id="tabla_a_desplegar" style="margin-left:26px; margin-right:27px; margin-top:-15px; display:none; ">
  <tbody>
    <tr>
      <td>
        <p style="font-family: 'Roadgeek 2005 Series 1B', sans-serif; font-size:16px; color:#000000; text-align:left; margin-top:12px">Habitacion 2</p>
      </td>
      <td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td>
      <td>
        <p style="font-family: 'Roadgeek 2005 Series 1B', sans-serif; font-size:16px; color:#000000; text-align:left; margin-top:12px; margin-left:-09px">Adulto</p>
      </td>
      <td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td>
      <td>
        <p style="font-family: 'Roadgeek 2005 Series 1B', sans-serif; font-size:16px; color:#000000; text-align:left;margin-top:12px">&nbsp;Ni&ntilde;o</p>
      </td>
    </tr>
    <tr>
      <td>
        <p style="font-family: 'Roadgeek 2005 Series 1B', sans-serif; font-size:16px; color:#000000; text-align:left; margin-top:12px">
          <a class="registro registrolinea habitacion" id="estadoT2" onClick="desplegar('tabla_b_desplegar','estadoT2', 'estadoTfila')" style="background: #AEE756; cursor: pointer;">+ Habitacion</a>
        </p>
      </td>


      <td>&nbsp;&nbsp;&nbsp;&nbsp;</td>
      <td>
        <p style="font-family: 'Roadgeek 2005 Series 1B', sans-serif; font-size:16px; color:#000000; text-align:left; margin-top:12px; margin-left:-09px">
          <select class="form-control seleccionunoir" id="sel1">

            <option>1</option>
            <option>2</option>
            <option>3</option>
            <option>4</option>
            <option>5</option>



          </select>
        </p>
      </td>
      <td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td>
      <td>
        <p style="font-family: 'Roadgeek 2005 Series 1B', sans-serif; font-size:16px; color:#000000; text-align:left;margin-top:12px">
          <select class="form-control selecciondosir" id="sel1">

            <option>0</option>
            <option>1</option>
            <option>2</option>
            <option>3</option>
            <option>4</option>
            <option>5</option>



          </select>
        </p>
      </td>
    </tr>
  </tbody>
</table>


<table id="tabla_b_desplegar" style="margin-left:26px; margin-right:27px; margin-top:-15px; display:none; ">
  <tbody>
    <tr>
      <td>
        <p style="font-family: 'Roadgeek 2005 Series 1B', sans-serif; font-size:16px; color:#000000; text-align:left; margin-top:12px">Habitacion 3</p>
      </td>
      <td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td>
      <td>
        <p style="font-family: 'Roadgeek 2005 Series 1B', sans-serif; font-size:16px; color:#000000; text-align:left; margin-top:12px; margin-left:-09px">Adulto</p>
      </td>
      <td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td>
      <td>
        <p style="font-family: 'Roadgeek 2005 Series 1B', sans-serif; font-size:16px; color:#000000; text-align:left;margin-top:12px">&nbsp;Ni&ntilde;o</p>
      </td>
    </tr>
    <tr>



      <td>&nbsp;&nbsp;&nbsp;&nbsp;</td>
      <td>
        <p style="font-family: 'Roadgeek 2005 Series 1B', sans-serif; font-size:16px; color:#000000; text-align:left; margin-top:12px;">
          <select class="form-control seleccionunoir" id="sel1">

            <option>1</option>
            <option>2</option>
            <option>3</option>
            <option>4</option>
            <option>5</option>



          </select>
        </p>
      </td>
      <td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td>
      <td>
        <p style="font-family: 'Roadgeek 2005 Series 1B', sans-serif; font-size:16px; color:#000000; text-align:left;margin-top:12px; ">
          <select class="form-control selecciondosir" id="sel1">

            <option>0</option>
            <option>1</option>
            <option>2</option>
            <option>3</option>
            <option>4</option>
            <option>5</option>



          </select>
        </p>
      </td>
    </tr>
  </tbody>
</table>
<table style="margin-left:180px">
  <tbody>
    <tr>
      <td>
        <button style="margin: 0 auto" type="button" class="btn btn-success">Buscar</button>
      </td>
    </tr>
  </tbody>
</table>
    
asked by Ing Alejandro Montes 21.03.2016 в 22:24
source

2 answers

1

As you pass different values to the desplegar function, a quick solution would be to check what value has been passed and if it is the first one, hide the next two rows instead of just the first. The idea is that if the second table is hidden, check if the third one is visible and hide it if it is hidden.

You could do that check in desplegar when a table is hidden (note that this code is specific to the problem you are presenting, if you change the code, for example by adding more tables, you will have to look for a more generic solution): 

// si la tabla que se oculta es la segunda y la tercera tabla está visible
if (tablA.id == "tabla_a_desplegar" && document.getElementById("tabla_b_desplegar").style.display == "block") {
    // esconde la tercera tabla (código copiado del segundo enlace)
    desplegar('tabla_b_desplegar','estadoT2', 'estadoTfila')
}

The result would be something like this: 

function desplegar(tabla_a_desplegar, estadoT, estadoTfila) {
  
  var tablA = document.getElementById(tabla_a_desplegar);
  var estadOt = document.getElementById(estadoT);
  var fila = document.getElementById(estadoTfila);

  switch (tablA.style.display) {
    case "none":
      tablA.style.display = "block";
      estadOt.innerHTML = "Ocultar";
      fila.innerHTML = "";
      fila.innerHTML = " La fila de id: " + fila.id + ". Contiene: " + fila.innerHTML + " :: " + fila.style.background;
      break;
    default:
      tablA.style.display = "none";
      estadOt.innerHTML = "+Habitacion"
      
      // si la tabla que se oculta es la segunda y la tercera tabla está visible
      if (tablA.id == "tabla_a_desplegar" && document.getElementById("tabla_b_desplegar").style.display == "block") {
        // esconde la tercera tabla
        desplegar('tabla_b_desplegar','estadoT2', 'estadoTfila')
      }
      break;
  }


}
<table style="margin-left:27px; margin-right:27px">
  <tbody>
    <tr>
      <td>
        <p style="font-family: 'Roadgeek 2005 Series 1B', sans-serif; font-size:16px; color:#000000; text-align:left; margin-top:12px">Habitacion 1</p>
      </td>
      <td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td>
      <td>
        <p style="font-family: 'Roadgeek 2005 Series 1B', sans-serif; font-size:16px; color:#000000; text-align:left; margin-top:12px">Adulto</p>
      </td>
      <td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td>
      <td>
        <p style="font-family: 'Roadgeek 2005 Series 1B', sans-serif; font-size:16px; color:#000000; text-align:left;margin-top:12px">&nbsp;Ni&ntilde;o</p>
      </td>
    </tr>
    <tr>
      <td>
        <p style="font-family: 'Roadgeek 2005 Series 1B', sans-serif; font-size:16px; color:#000000; text-align:left; margin-top:12px">
          <a class="registro registrolinea habitacion" id="estadoT" onClick="desplegar('tabla_a_desplegar','estadoT', 'estadoTfila')" style="background: #AEE756; cursor: pointer;">+ Habitacion</a>
        </p>
      </td>


      <td>&nbsp;&nbsp;&nbsp;&nbsp;</td>
      <td>
        <p style="font-family: 'Roadgeek 2005 Series 1B', sans-serif; font-size:16px; color:#000000; text-align:left; margin-top:12px">
          <select class="form-control seleccionunoir" id="sel1">

            <option>1</option>
            <option>2</option>
            <option>3</option>
            <option>4</option>
            <option>5</option>



          </select>
        </p>
      </td>
      <td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td>
      <td>
        <p style="font-family: 'Roadgeek 2005 Series 1B', sans-serif; font-size:16px; color:#000000; text-align:left;margin-top:12px">
          <select class="form-control selecciondosir" id="sel1">

            <option>0</option>
            <option>1</option>
            <option>2</option>
            <option>3</option>
            <option>4</option>
            <option>5</option>



          </select>
        </p>
      </td>
    </tr>

  </tbody>
</table>
<table id="tabla_a_desplegar" style="margin-left:26px; margin-right:27px; margin-top:-15px; display:none; ">
  <tbody>
    <tr>
      <td>
        <p style="font-family: 'Roadgeek 2005 Series 1B', sans-serif; font-size:16px; color:#000000; text-align:left; margin-top:12px">Habitacion 2</p>
      </td>
      <td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td>
      <td>
        <p style="font-family: 'Roadgeek 2005 Series 1B', sans-serif; font-size:16px; color:#000000; text-align:left; margin-top:12px; margin-left:-09px">Adulto</p>
      </td>
      <td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td>
      <td>
        <p style="font-family: 'Roadgeek 2005 Series 1B', sans-serif; font-size:16px; color:#000000; text-align:left;margin-top:12px">&nbsp;Ni&ntilde;o</p>
      </td>
    </tr>
    <tr>
      <td>
        <p style="font-family: 'Roadgeek 2005 Series 1B', sans-serif; font-size:16px; color:#000000; text-align:left; margin-top:12px">
          <a class="registro registrolinea habitacion" id="estadoT2" onClick="desplegar('tabla_b_desplegar','estadoT2', 'estadoTfila')" style="background: #AEE756; cursor: pointer;">+ Habitacion</a>
        </p>
      </td>


      <td>&nbsp;&nbsp;&nbsp;&nbsp;</td>
      <td>
        <p style="font-family: 'Roadgeek 2005 Series 1B', sans-serif; font-size:16px; color:#000000; text-align:left; margin-top:12px; margin-left:-09px">
          <select class="form-control seleccionunoir" id="sel1">

            <option>1</option>
            <option>2</option>
            <option>3</option>
            <option>4</option>
            <option>5</option>



          </select>
        </p>
      </td>
      <td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td>
      <td>
        <p style="font-family: 'Roadgeek 2005 Series 1B', sans-serif; font-size:16px; color:#000000; text-align:left;margin-top:12px">
          <select class="form-control selecciondosir" id="sel1">

            <option>0</option>
            <option>1</option>
            <option>2</option>
            <option>3</option>
            <option>4</option>
            <option>5</option>



          </select>
        </p>
      </td>
    </tr>
  </tbody>
</table>


<table id="tabla_b_desplegar" style="margin-left:26px; margin-right:27px; margin-top:-15px; display:none; ">
  <tbody>
    <tr>
      <td>
        <p style="font-family: 'Roadgeek 2005 Series 1B', sans-serif; font-size:16px; color:#000000; text-align:left; margin-top:12px">Habitacion 3</p>
      </td>
      <td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td>
      <td>
        <p style="font-family: 'Roadgeek 2005 Series 1B', sans-serif; font-size:16px; color:#000000; text-align:left; margin-top:12px; margin-left:-09px">Adulto</p>
      </td>
      <td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td>
      <td>
        <p style="font-family: 'Roadgeek 2005 Series 1B', sans-serif; font-size:16px; color:#000000; text-align:left;margin-top:12px">&nbsp;Ni&ntilde;o</p>
      </td>
    </tr>
    <tr>



      <td>&nbsp;&nbsp;&nbsp;&nbsp;</td>
      <td>
        <p style="font-family: 'Roadgeek 2005 Series 1B', sans-serif; font-size:16px; color:#000000; text-align:left; margin-top:12px;">
          <select class="form-control seleccionunoir" id="sel1">

            <option>1</option>
            <option>2</option>
            <option>3</option>
            <option>4</option>
            <option>5</option>



          </select>
        </p>
      </td>
      <td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td>
      <td>
        <p style="font-family: 'Roadgeek 2005 Series 1B', sans-serif; font-size:16px; color:#000000; text-align:left;margin-top:12px; ">
          <select class="form-control selecciondosir" id="sel1">

            <option>0</option>
            <option>1</option>
            <option>2</option>
            <option>3</option>
            <option>4</option>
            <option>5</option>



          </select>
        </p>
      </td>
    </tr>
  </tbody>
</table>
<table style="margin-left:180px">
  <tbody>
    <tr>
      <td>
        <button style="margin: 0 auto" type="button" class="btn btn-success">Buscar</button>
      </td>
    </tr>
  </tbody>
</table>
    
answered by 22.03.2016 в 00:57
0

Make some changes in the html , redefining how the ids of the tags are called and in the javascript you will see that it is necessary to go through the lower tables to hide them

Analyze the code, you'll see it's simple. 

function desplegar(nroTabla, estadOt) {

  var tabla = document.getElementById('tabla' + nroTabla);
  //var estadOt = document.getElementById(estadoT);
  //var fila = document.getElementById(estadoTfila);

  switch (tabla.style.display) {
      
    case "none":
      tabla.style.display = "block";
      estadOt.innerHTML = "Ocultar";

      break;
      
    case "block":
      tabla.style.display = "none";
      estadOt.innerHTML = "+Habitacion";
      
      for(i = nroTabla; i<= 3; i++){
          var tablaTemp = document.getElementById('tabla' + i);
          tablaTemp.style.display = "none";
          var estadoTemp = document.getElementById('estadoT' + i);
          estadoTemp.innerHTML = "+Habitacion";
      }
      
      break;
  }


}
<table style="margin-left:27px; margin-right:27px">
  <tbody>
    <tr>
      <td>
        <p style="font-family: 'Roadgeek 2005 Series 1B', sans-serif; font-size:16px; color:#000000; text-align:left; margin-top:12px">Habitacion 1</p>
      </td>
      <td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td>
      <td>
        <p style="font-family: 'Roadgeek 2005 Series 1B', sans-serif; font-size:16px; color:#000000; text-align:left; margin-top:12px">Adulto</p>
      </td>
      <td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td>
      <td>
        <p style="font-family: 'Roadgeek 2005 Series 1B', sans-serif; font-size:16px; color:#000000; text-align:left;margin-top:12px">&nbsp;Ni&ntilde;o</p>
      </td>
    </tr>
    <tr>
      <td>
        <p style="font-family: 'Roadgeek 2005 Series 1B', sans-serif; font-size:16px; color:#000000; text-align:left; margin-top:12px">
          <a class="registro registrolinea habitacion" id="estadoT1" onClick="desplegar(2, this);" style="background: #AEE756; cursor: pointer;">+ Habitacion</a>
        </p>
      </td>


      <td>&nbsp;&nbsp;&nbsp;&nbsp;</td>
      <td>
        <p style="font-family: 'Roadgeek 2005 Series 1B', sans-serif; font-size:16px; color:#000000; text-align:left; margin-top:12px">
          <select class="form-control seleccionunoir" id="sel1">

            <option>1</option>
            <option>2</option>
            <option>3</option>
            <option>4</option>
            <option>5</option>



          </select>
        </p>
      </td>
      <td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td>
      <td>
        <p style="font-family: 'Roadgeek 2005 Series 1B', sans-serif; font-size:16px; color:#000000; text-align:left;margin-top:12px">
          <select class="form-control selecciondosir" id="sel1">

            <option>0</option>
            <option>1</option>
            <option>2</option>
            <option>3</option>
            <option>4</option>
            <option>5</option>



          </select>
        </p>
      </td>
    </tr>

  </tbody>
</table>

<table id="tabla2" style="margin-left:26px; margin-right:27px; margin-top:-15px; display:none; ">
  <tbody>
    <tr>
      <td>
        <p style="font-family: 'Roadgeek 2005 Series 1B', sans-serif; font-size:16px; color:#000000; text-align:left; margin-top:12px">Habitacion 2</p>
      </td>
      <td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td>
      <td>
        <p style="font-family: 'Roadgeek 2005 Series 1B', sans-serif; font-size:16px; color:#000000; text-align:left; margin-top:12px; margin-left:-09px">Adulto</p>
      </td>
      <td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td>
      <td>
        <p style="font-family: 'Roadgeek 2005 Series 1B', sans-serif; font-size:16px; color:#000000; text-align:left;margin-top:12px">&nbsp;Ni&ntilde;o</p>
      </td>
    </tr>
    <tr>
      <td>
        <p style="font-family: 'Roadgeek 2005 Series 1B', sans-serif; font-size:16px; color:#000000; text-align:left; margin-top:12px">
          <a class="registro registrolinea habitacion" id="estadoT2" onClick="desplegar(3, this);" style="background: #AEE756; cursor: pointer;">+ Habitacion</a>
        </p>
      </td>


      <td>&nbsp;&nbsp;&nbsp;&nbsp;</td>
      <td>
        <p style="font-family: 'Roadgeek 2005 Series 1B', sans-serif; font-size:16px; color:#000000; text-align:left; margin-top:12px; margin-left:-09px">
          <select class="form-control seleccionunoir" id="sel1">

            <option>1</option>
            <option>2</option>
            <option>3</option>
            <option>4</option>
            <option>5</option>



          </select>
        </p>
      </td>
      <td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td>
      <td>
        <p style="font-family: 'Roadgeek 2005 Series 1B', sans-serif; font-size:16px; color:#000000; text-align:left;margin-top:12px">
          <select class="form-control selecciondosir" id="sel1">

            <option>0</option>
            <option>1</option>
            <option>2</option>
            <option>3</option>
            <option>4</option>
            <option>5</option>



          </select>
        </p>
      </td>
    </tr>
  </tbody>
</table>


<table id="tabla3" style="margin-left:26px; margin-right:27px; margin-top:-15px; display:none; ">
  <tbody>
    <tr>
      <td>
        <p style="font-family: 'Roadgeek 2005 Series 1B', sans-serif; font-size:16px; color:#000000; text-align:left; margin-top:12px">Habitacion 3</p>
      </td>
      <td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td>
      <td>
        <p style="font-family: 'Roadgeek 2005 Series 1B', sans-serif; font-size:16px; color:#000000; text-align:left; margin-top:12px; margin-left:-09px">Adulto</p>
      </td>
      <td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td>
      <td>
        <p style="font-family: 'Roadgeek 2005 Series 1B', sans-serif; font-size:16px; color:#000000; text-align:left;margin-top:12px">&nbsp;Ni&ntilde;o</p>
      </td>
    </tr>
    <tr>



      <td>&nbsp;&nbsp;&nbsp;&nbsp;</td>
      <td>
        <p style="font-family: 'Roadgeek 2005 Series 1B', sans-serif; font-size:16px; color:#000000; text-align:left; margin-top:12px;">
          <select class="form-control seleccionunoir" id="sel1">

            <option>1</option>
            <option>2</option>
            <option>3</option>
            <option>4</option>
            <option>5</option>



          </select>
        </p>
      </td>
      <td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td>
      <td>
        <p style="font-family: 'Roadgeek 2005 Series 1B', sans-serif; font-size:16px; color:#000000; text-align:left;margin-top:12px; ">
          <select class="form-control selecciondosir" id="sel1">

            <option>0</option>
            <option>1</option>
            <option>2</option>
            <option>3</option>
            <option>4</option>
            <option>5</option>



          </select>
        </p>
      </td>
    </tr>
  </tbody>
</table>
<table style="margin-left:180px">
  <tbody>
    <tr>
      <td>
        <button style="margin: 0 auto" type="button" class="btn btn-success">Buscar</button>
      </td>
    </tr>
  </tbody>
</table>
    
answered by 22.03.2016 в 00:56
HTML / PHP Fill in contact-form in safari Two arrays in the same layout