JQuery toggle containers

Toggle containers via button

by Sascha

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.0.0-alpha1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<button class="toggle-next">+</button>
<div class="togglable" style="display:none;">
  <table class="table table-bordered table-striped" align="center">
    <thead>
      <tr>
        <th scope="col">team1 </th>
        <th scope="col">team2 </th>
        <th scope="col">Team3 </th>
        <th scope="col">team4 </th>
        <th scope="col">team5 </th>
        <th scope="col">team6 </th>
        <th scope="col">team7 </th>
      </tr>
    </thead>
    <tbody>
      <td> accept</td>
      <td> accept</td>
      <td> accept</td>
      <td> accept</td>
      <td> accept</td>
      <td> accept</td>
      <td> accept</td>
    </tbody>
  </table>
</div>

<br/>
<button class="toggle-next">-</button>
<div class="togglable">
I can be hidden as well.
</div>

JavaScript

$('body').on('click', '.toggle-next', function() {
  $(this).text($(this).text() === '-' ? '+' : '-');
  $(this).next('.togglable').toggle($(this).text()=='-');
})