J'ai pris l'exemple de la table HTML et du script jQuery et j'essaie de changer le comportement de cette combinaison. Actuellement, les lignes du tableau sont développées et réduites sur click. Comment changer cela pour qu'il soit réduit et développé sur click.

$('.header').click(function() {
  $(this).toggleClass('expand').nextUntil('tr.header').slideToggle(100);
});
table,
tr,
td,
th {
  border: 1px solid black;
  border-collapse: collapse;
}

tr.header {
  cursor: pointer;
}

.header .sign:after {
  content: "+";
  display: inline-block;
}

.header.expand .sign:after {
  content: "-";
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<table border="0">
  <tr class="header expand">
    <th colspan="2">Header <span class="sign"></span></th>
  </tr>
  <tr>
    <td>data</td>
    <td>data</td>
  </tr>
  <tr>
    <td>data</td>
    <td>data</td>
  </tr>
  <tr class="header expand">
    <th colspan="2">Header <span class="sign"></span></th>
  </tr>
  <tr>
    <td>date</td>
    <td>data</td>
  </tr>
  <tr>
    <td>data</td>
    <td>data</td>
  </tr>
  <tr>
    <td>data</td>
    <td>data</td>
  </tr>
</table>

Violon

2
Klapsius 15 mars 2019 à 15:46

2 réponses

Meilleure réponse

Pour inverser l'état par défaut, vous devez simplement supprimer la classe expand des éléments .header et définir display: none sur les éléments standard tr. La logique JS est par ailleurs identique.

tr.header {
  cursor: pointer;
  display: table-row;
}

tr {
  display: none;
}

Violon mis à jour

2
Rory McCrossan 15 mars 2019 à 12:59

Afin d'avoir un comportement de réduction pour développer, masquez d'abord les lignes :

 $('.header').nextUntil('tr.header').hide(); 
$('.header').nextUntil('tr.header').hide();
$('.header').click(function() {
  $(this).toggleClass('expand').nextUntil('tr.header').slideToggle(100);
});
table,
tr,
td,
th {
  border: 1px solid black;
  border-collapse: collapse;
}

tr.header {
  cursor: pointer;
}

.header .sign:after {
  content: "+";
  display: inline-block;
}

.header.expand .sign:after {
  content: "-";
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<table border="0">
  <tr class="header expand">
    <th colspan="2">Header <span class="sign"></span></th>
  </tr>
  <tr>
    <td>data</td>
    <td>data</td>
  </tr>
  <tr>
    <td>data</td>
    <td>data</td>
  </tr>
  <tr class="header expand">
    <th colspan="2">Header <span class="sign"></span></th>
  </tr>
  <tr>
    <td>date</td>
    <td>data</td>
  </tr>
  <tr>
    <td>data</td>
    <td>data</td>
  </tr>
  <tr>
    <td>data</td>
    <td>data</td>
  </tr>
</table>
1
Rory McCrossan 15 mars 2019 à 13:29