Show/hide table TDs when clicking on one particular TD

Question

I found this answer that responded exactly my problem, but I can't figure out how to properly use it on my code. I kind of made it work and suddenly nothing…

Show or hide table row if user clicks on it (HTML/JQuery)

All I want is to show/hide the next 3 TD when clicking on the first one.

For exemple, when clicking on "Tarif Plein", the price, quantity selector and "Réservez" TD to show/hide.

Below you can see some code :

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 with some styling but the most important part is the display none/block

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

Answer 1

Hi and bienvenu dans StackOverflow !

All is perfect with your code !

Just one thing you forgot to do to get expected result:

Change

.showTicket .tc-event-table-wrap td:nth-child(1n+2) {
  display: block;
}

To

.tc-event-table-wrap .showTicket td:nth-child(1n+2) {
  display: block;
}

$('.tc-event-table-wrap td:nth-child(1)').click(function(){
        $(this).parent().toggleClass("showTicket");
    });

{ 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;
}

.tc-event-table-wrap .showTicket  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;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<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>