Espero puedan ayudarme. Estoy haciendo un booking de viajes y tengo un formulario que al darle al enlace mostrar me muestra el formulario dos y luego me da la opción de ocultarlo cuando no lo necesito. El problema es cuando quiero agregarle otra tabla que me muestre un formulario tres, el cual no sé como hacerlo.
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"
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="estadoT" onClick="desplegardos('tabla_b_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; 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>
</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>