Я нашел этот ответ, который точно ответил на мою проблему, но я не могу понять, как правильно использовать его в моем коде. Я вроде заставил это работать, и вдруг ничего ...
Показать или скрыть строку таблицы, если пользователь нажимает на нее (HTML / JQuery)
Все, что я хочу, - это показать / скрыть следующие 3 TD при нажатии на первый.
Например, при нажатии на "Tarif Plein", селектор цены, количества и TD "Réservez", чтобы показать / скрыть.
Ниже вы можете увидеть код:
HTML
<div class="tc-event-table-wrap">
<table class="event_tickets tickera">
<tbody>
<tr>
<th>Type de Ticket</th>
<th>Prix</th>
<th>Qté.</th>
<th>Panier</th>
</tr>
<tr>
<td>Tarif plein</td>
<td>15 €</td>
<td> <select class="tc_quantity_selector">
<option value="1">1</option>
</select></td>
<td>
<form class="cart_form"><a href="#" class="add_to_cart" data-button-type="cart" data-open-method="regular" id="ticket_1817"><span class="title">Achetez</span></a><input type="hidden" name="ticket_id" class="ticket_id" value="1817"></form>
</td>
</tr>
<tr>
<td>Réduit</td>
<td>10 €</td>
<td> <select class="tc_quantity_selector">
<option value="1">1</option>
</select></td>
<td>
<form class="cart_form"><a href="#" class="add_to_cart" data-button-type="cart" data-open-method="regular" id="ticket_1818"><span class="title">Achetez</span></a><input type="hidden" name="ticket_id" class="ticket_id" value="1818"></form>
</td>
</tr>
<tr>
<td>Carte Culture</td>
<td>5.50 €</td>
<td> <select class="tc_quantity_selector">
<option value="1">1</option>
</select></td>
<td>
<form class="cart_form"><a href="#" class="add_to_cart" data-button-type="cart" data-open-method="regular" id="ticket_1819"><span class="title">Achetez</span></a><input type="hidden" name="ticket_id" class="ticket_id" value="1819"></form>
</td>
</tr>
</tbody>
</table>
</div>
</div>
CSS с некоторыми стилями, но самой важной частью дисплей нет / блок
display: block;
text-align: center;
border: none;
padding: 0px 10px 0px 10px;
}
.tc-event-table-wrap td:nth-child(1) {
font-weight: bold;
line-height: 1;
padding-bottom: 15px;
}
.tc-event-table-wrap td:nth-child(2) {
float: left;
width: 50%;
text-align: right;
}
.tc-event-table-wrap td:nth-child(3) {
float: right;
width: 50%;
text-align: left;
padding-bottom: 10px;
}
/* What need to change is here */
.tc-event-table-wrap td:nth-child(1n+2) {
display: none;
}
.showTicket .tc-event-table-wrap td:nth-child(1n+2) {
display: block;
}
/* END What need to change is here */
.tc-event-table-wrap tr {
padding: 15px 10px 10px 10px !important;
background-color: #f7f7f7;
}
.tc-event-table-wrap tr:first-child {
display: none;
}
.tc-event-table-wrap tr:hover {
background-color: #ffdd00;
cursor: pointer;
}
.tc-event-table-wrap {
border-radius: 10px;
}
.tickera table {
width: 100%;
}
.tickera .add_to_cart {
color: #61b700 !important;
}
.tickera .add_to_cart :hover {
font-weight: bold;
color: #61b700 !important;
text-decoration: underline;
display: block;
}
.tc_quantity_selector {
width: 75%;
font-size: 13px;
border: 1px solid #ccc;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
jQuery
$('.tc-event-table-wrap td:nth-child(1)').click(function(){
$(this).parent().toggleClass("showTicket");
});
});