Buenas tardes tengo un código que me funciona bien y lo que hace es que al darle en habitacion 1 +habitacion me muestra habitacion 2 y en habitacion 2 al darle +habitacion me muestra habitacion 3 en cada uno puedo ocultar pero quisiera que en habitacion 1 pudiera darle ocultar y me oculte simultaneamente habitacion 2 y habitacion 3 porque al darle en estos momentos a ocultar en habitacion 1 cuando esta abierto habitacion 2 y habitacion 3 me queda abierto habitacion 3 y quisiera que solo quedara habitacion 1 osea me vuelva al estado inicial. A continuación el código gracias.
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> </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> </td>
<td>
<p style="font-family: 'Roadgeek 2005 Series 1B', sans-serif; font-size:16px; color:#000000; text-align:left;margin-top:12px"> Niñ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> </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> </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> </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> </td>
<td>
<p style="font-family: 'Roadgeek 2005 Series 1B', sans-serif; font-size:16px; color:#000000; text-align:left;margin-top:12px"> Niñ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> </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> </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> </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> </td>
<td>
<p style="font-family: 'Roadgeek 2005 Series 1B', sans-serif; font-size:16px; color:#000000; text-align:left;margin-top:12px"> Niño</p>
</td>
</tr>
<tr>
<td> </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> </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>